如何在叠加层中自动播放html5视频元素?

时间:2012-06-12 09:18:35

标签: jquery-plugins html5-video flowplayer

我创建了一个包含多个媒体的页面,每个媒体都隐藏在一个隐藏的div中,当单击菜单链接时,该页面会被触发加载到jquery工具叠加层中。点击链接时我希望实现的目标很少:

  1. 视频自动播放加载到叠加层
  2. 关闭叠加层时视频暂停或停止
  3. 视频重新加载和自动播放,如果再次点击同一链接
  4. 我实现了#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>
    

1 个答案:

答案 0 :(得分:0)

执行此操作的简单方法是在mouseout上清空叠加内容,然后在显示叠加层之前在鼠标悬停时填充它们。通过这种方式,浏览器可以为您完成所有工作。由于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();
});

我没有测试过这个,但这个想法很合理......

希望有所帮助。