Question

我正在尝试创建一个HTML5视频播放器，该视频播放器会在当前视频结束后自动播放新视频。

<video autobuffer controls width="500" id="player">
   <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4" id="source">
</video>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $(document).ready( function () { 

      $("#player").bind("ended", function() {
        alert("Finshed, play new video now...");
        $('#source').attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4'); 
      });

    });  
</script>

已结束的事件正在触发（根据alert();），但新文件似乎未被玩家识别。

Answer 1

删除<source>元素并直接在src标记上添加<video>属性。当有多个源时，您只需要<source>个元素。然后，更改src的{{1}}，它应该可以正常工作。

如果您需要支持更多文件类型（例如，Firefox的OGG视频），那么您应该使用<video>方法来检测需要哪个canPlayType()扩展名。

Answer 2

您需要使用#player，而不是#source

HTML5视频：识别新来源

2 个答案: