jquery - HTML5 视频 : Recognize a new source

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>元素并添加 src属性直接在<video>上标签。您只需要<source>当有多个来源时的元素。然后，更改 src <video>的它应该工作得很好。

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