HTML5视频:识别新来源

Question

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

以下是我目前的代码(http://jsfiddle.net/fFuez/1/)：

<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>元素并直接在<video>标记上添加src属性。只有当有多个源时，才需要<source>元素。然后，更改<video>的src，它应该可以正常工作。

如果你需要支持更多的文件类型(比如火狐的OGG video )，那么你应该使用canPlayType()方法来检测需要哪个src扩展名。

Answer 2

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