Jquery plugins 如何在叠加中自动播放html5视频元素？

我创建了一个包含多个媒体的页面，每个媒体都位于一个隐藏的div中，当单击菜单链接时，jquerytools覆盖会触发该div加载。点击链接时，我希望实现的几件事：

视频自动播放（当它加载到覆盖中时） 覆盖关闭时视频暂停或停止 如果再次单击同一链接，视频重新加载和自动播放 我得了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>

---

要做到这一点，最简单的方法就是清空mouseout上的覆盖内容，然后在显示覆盖之前在mouseover上填充它们。这样，浏览器将为您完成所有工作。由于dom操作，性能会受到轻微的影响，但几乎不值得一提

比如：

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

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();
});

现在，您已经拥有了元素数据属性上的所有必要内容，然后您可以执行以下操作：

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

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();
});

我还没有测试过这个，但这个想法是合理的

希望有帮助