2011-10-24 50 views
1

我試圖創建一個HTML5視頻播放器,一旦當前視頻結束,它就會自動播放一個新視頻。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();),但新的文件簡化版,似乎玩家的認可。

回答

3

取出<source>元素,並直接添加src屬性上<video>標籤。當有多個源時,您只需要<source>元素。然後,更改<video>src,它應該工作得很好。

如果您需要支持更多文件類型(例如Firefox的OGG視頻),那麼您應該使用canPlayType()方法來檢測需要哪個src擴展名。

0

您需要使用#player,不#source