播放並停止Vimeo視頻放置在Bootstrap模式下

我在Bootstrap視頻中播放Vimeo iframe視頻。當我觸發模式並在模式關閉時停止播放時，我需要讓它開始播放。目前，我可以通過讓iframe沒有src屬性並在觸發模式時使用jQuery來填充模態。這是代碼片段;播放並停止Vimeo視頻放置在Bootstrap模式下

jQuery("#videogumb").click(function() { 
    jQuery('#myModal .modal-body iframe').attr('src','the-source-code'); 
    });

這工作正常，我得到它開始時，模式打開，但當我關閉模式音樂不斷在後臺播放。

其他方法可以正常工作，但僅用於關閉模式而不設置爲自動播放。所以自動播放設置爲0，我有這個片段;

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() { 
    jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src")); 
    });

這會在我關閉模式時停止視頻。我需要以某種方式組合這個。我需要在模式打開時自動播放，並在模式關閉時停止播放。

任何線索？

謝謝。

來源

2014-07-25 user2549830

-1

參照Vimeo's embedding documentation。

有一個屬性，您可以設置爲autoplay。他們指出，它可能無法在某些設備上工作，但將此屬性設置爲1（或者可能是true）應該有所幫助。

的代碼可能是這個樣子：

jQuery('#myModal .modal-body iframe').attr({ 
    src: 'the-source-code', 
    autoplay: 1 
});

來源

2014-07-25 15:37:24

我通過調用兩個引導模態API和Vimeo API，下面的代碼來實現這一點。您還需要在下面添加Vimeo的Froogaloop腳本。

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 

$('.modal').on('hidden.bs.modal', function() { 
player.api('pause'); 
}) 

$('.modal').on('shown.bs.modal', function() { 
player.api('play'); 
})

來源

2014-12-10 15:45:06 eroedig

要添加到eroedig的答案，請查看Vimeo的文檔Calling the API with Froogaloop。

Add？API = 1 &在喜歡你的通用嵌入代碼player_id = vimeoplayer：

<iframe src="//player.vimeo.com/video/116160160?api=1&player_id=vimeoplayer&title=0&amp;byline=0&amp;portrait=0" name="vimeoplayer" id="nofocusvideo" width="615" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

注 - 我把它命名爲 'nofocusvideo' 中的標識將在這裏看到：

var iframe = document.getElementById('nofocusvideo');

聲明2可變上述eroedig的JS等：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script> 
 
<script> 
 
var iframe = document.getElementById('nofocusvideo'); 
 
// $f == Froogaloop 
 
var player = $f(iframe); 
 

 
$('.modal').on('hidden.bs.modal', function() { 
 
player.api('pause'); 
 
}) 
 

 
$('.modal').on('shown.bs.modal', function() { 
 
player.api('play'); 
 
}) 
 
</script>

來源

2015-01-08 20:53:50 jondotwang

真是太爽了，謝謝！ – bep42

感謝您的好評！ –

我試圖使用froogaloop2但它總是返回此錯誤：無法讀取物業「準備」未定義

相反，您可以簡單地使用postMessage致電在iframe之內的視頻上的和pause。

$(document).ready(function() { 
    var $iframe = $('#nofocusvideo'), 
     contentWindow = $iframe[0].contentWindow, 
     targetOriginUrl = $iframe.attr('src').split('?')[0]; 
    $('.modal').on('hidden.bs.modal', function() { 
    contentWindow.postMessage({ 'method': 'pause' }, targetOriginUrl); 
    }); 
    $('.modal').on('shown.bs.modal', function() { 
    contentWindow.postMessage({ 'method': 'play' }, targetOriginUrl); 
    }); 
});

來源

2015-10-15 01:22:28

所以我在這裏嘗試了所有的建議，並沒有什麼是工作相當以及來自Vimeo的更新文檔.. https://github.com/vimeo/player.js#pause-promisevoid-error

<script src="https://player.vimeo.com/api/player.js"></script> 
 
<script> 
 
    var iframe = document.querySelector('iframe'); 
 
    var player = new Vimeo.Player(iframe); 
 

 
$('.modal').on('hidden.bs.modal', function() { 
 
\t player.pause(); 
 
}) 
 

 
$('.modal').on('shown.bs.modal', function() { 
 
\t player.play(); 
 
}) 
 

 
</script>

來源

2016-09-27 17:23:43

播放並停止Vimeo視頻放置在Bootstrap模式下

回答

相關問題