如何自動播放疊加層中的html5視頻元素？

Question

我創建了一個頁面，其中包含多個媒體，每個媒體內的一個隱藏的div，當點擊一個菜單鏈接時，會觸發它加載到jquery工具疊加層中。幾件事我想實現當一個點擊鏈接：

1. 視頻自動播放時，它的加載在覆蓋
2. 視頻暫停或停止時，覆蓋在上，如果再點擊關閉
3. 視頻重載和自動播放相同的鏈接

我取得了＃2，但在＃1和＃3上失敗。使用下面的代碼，視頻播放器和媒體將加載到疊加層中，但不會自動播放，並且在嘗試關閉鏈接並重新打開時播放器無法加載。

我在下面的代碼中做了什麼錯誤？

<div id="menu"> 
    <a href="#"><img src="images/image1.jpg" rel="#overlay1"/></a> 
    <a href="#"><img src="images/image2.jpg" rel="#overlay2"/></a> 
    <a href="#"><img src="images/image3.jpg" rel="#overlay3"/></a> 
</div> 
<div class="overlay" id="overlay1"> 
    <video class="player" id="bbb" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360"> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /> 
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" /> 
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> 
     <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /> 
     <param name="allowFullScreen" value="true" /> 
     <param name="wmode" value="transparent" /> 
     <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" /> 
     <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</div> 
<div class="overlay" id="overlay2">(same as above, different media)</div> 
<div class="overlay" id="overlay2">(same as above, different media)</div> 

<script> 
$(function() { 
    $("a [rel]").overlay({ 
     effect: 'apple',   
     expose: '#101010', 
     closeOnClick: 'false', 
     closeOnEsc: 'false', 
     onLoad: function(content) { 
      this.getOverlay().find(".player").flowplayer(0).load(); 
      $('#bbb').get(0).play() 
     }, 
     onClose: function(content) { 
      $(".overlay").children().filter("video").each(function(){ 
       this.pause(); 
      }); 
     } 
    });   
    $(".player").flowplayer("http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {clip: {autoPlay: true}}); 
}); 
</script> 

Answer 1

簡單方便的方法來做到這將是簡單的空鼠標移開時覆蓋內容，然後顯示覆蓋之前填充它們鼠標懸停。這樣瀏覽器就可以爲你做所有的工作。會有因爲DOM操作，但幾乎沒有值得一提的一個微小的性能損失..

類似：

<div class="overlay" id="overlay1" data-vsrc-mp4="...mp4" data-vsrc-webm="...webm" data-vsrc-ogv="...ogv" data-vsrc-poster="...jpg"> 

，所以你現在擁有所有必要的東西上元素的數據ATTRS那麼你可以只這樣做：

var videoTemplate = 
'<video class="player" id="bbb" controls="controls" poster="##poster##" width="640" height="360"><source src="##mp4##" type="video/mp4" /><source src="##webm##" /><source src="##ogv##" type="video/ogg" /><object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"><param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowFullScreen" value="true" /><param name="wmode" value="transparent" /><param name="flashVars" value="config={\'playlist\':[\'##poster##\',{\'url\':\'##mp4##\',\'autoPlay\':true}]}" /><img alt="Big Buck Bunny" src="##poster##" width="640" height="360" title="No video playback capabilities, please download the video below" /></object></video>'; 

$("div.overlay").hover(function(){ 
    var newhtml = videoTemplate.replace(/##poster##/g,$(this).data("vsrc-poster")//....and so on for all data elements 
    $(this).empty().append(newhtml); 
},function(){ 
    $(this).empty(); 
}); 

我還沒有測試這一點，但這個想法是合理的......

希望有所幫助。