我有一個lightbox中的HTML5視頻。爲什麼要播放多個視頻，我該如何阻止它們？

我有一個Fancybox2窗口彈出下面的代碼：我有一個lightbox中的HTML5視頻。爲什麼要播放多個視頻，我該如何阻止它們？

var mediaElementPlayers = []; 

$("#video_list_widget a.video_link").fancybox({ 
    padding : 0, 
    width:500, 
    height: 360, 
    closeBtn: false, 
    content: '<video width="500" height="360" controls="controls" autoplay="autoplay" preload="auto"> 
    <source type="video/mp4" src="http://pathtomyvideo.mp4" /> 

    <source type="video/webm" src="http://pathtomyvideo.webm" /> 

</video>', 
    afterShow: function() { 
     var mediaElementPlayers = []; 
     $('video,audio').each(function(){ 
      mediaElementPlayers.push(new MediaElementPlayer(this)); 
      console.log(mediaElementPlayers); 
     }); 
    }, 

    beforeClose: function(){ 
     for (var i=0; i<mediaElementPlayers.length; i++){ 
      console.log(mediaElementPlayers); 
      mediaElementPlayers[i].pause(); // pause 
      mediaElementPlayers[i].setCurrentTime(0); // rewind 
     } 
     $('.fancybox-inner').empty(); 
    }, 
    afterClose: function(){ 
     $('video').remove(); 
    } 


});

我第一次點擊a.video_link，它會彈出併發揮就好了。我們稱之爲視頻1.如果我關閉了燈箱而沒有停止視頻，它會停下來並被殺死。沒問題。

如果我再次點擊a.video_link，它會彈出並從頭開始（我們稱之爲視頻2），但視頻1的音頻也在頂部播放。如果我現在關閉視頻2的燈箱，視頻1的音頻會繼續播放。如果我第三次打開燈箱，視頻2的音頻也會啓動。這樣繼續下去，所以我可以有很多層的音頻。

任何人都可以提出解決方案嗎？

更新：我可以告訴你，當自動播放屬性被刪除它不會發生，這表明，我認爲原<video>對象被打，纔可以得到裹在媒體播放器JS的東西。如果可能，我真的很喜歡自動播放功能。

來源

2012-06-27 Jodi Warren

我不知道它會對你有多相關，但我只寫了一篇關於如何在fancyBox中使用mediaelement.js播放視頻的教程http://www.picssel.com/play-mp4-videos-with- mediaelement-js-in-fancybox /（我只用了mp4文件） – JFK

這只是一個猜測，但我會想象它是與你的選擇器有關。

當您打開/播放視頻時，它似乎也觸發了頁面上的其他視頻 - 我認爲autoplay屬性實際上可以幫助您顯示您的某些代碼針對的是頁面上的其他玩家你不想亂搞。

我會想象在這條線，這是問題，因爲它是在頁面上全局作用在頁面上針對所有音頻和視頻標籤，而不僅僅是特定元素中的音頻/視頻標籤：

$('video,audio').each(function(){

我會改變這一行，所以它只針對特定的音頻/視頻標籤 - 你可以通過給音頻/視頻標籤和id屬性或使用jQuery來進行搜索 - 我沒有訪問你的代碼，所以這可能是將不起作用，但它應該接近你所需要的：

$(this).find('video,audio').each(function(){

希望這有助於！

來源

2012-09-04 10:52:29 acSlater

我有一個lightbox中的HTML5視頻。爲什麼要播放多個視頻，我該如何阻止它們？

回答

相關問題