jQuery和HTML5視頻 - 更改源onClick

Question

我必須使用HTML5和jQuery創建交互式視頻。我的目標是：

1. 播放video1
2. 當video1兩端顯示button1，onClick變化video2和隱藏button1
3. 播放video2
4. On Ended顯示button 2，OnClick變化video 3
5. 等上...

我給你的問題是，我做錯了什麼？ 這是我的代碼。

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()"> 
    <source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 
</section> 

<section id="buttons" class="btnShow"> 
    <ul id="buttons2" hidden> 
     <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li> 

    </ul> 
</section> 

功能testEnded()是在外部片（其被適當地鏈接到HTML）。 的腳本如下：

function changeSrc1() { 
    $('#srcWebm').attr('src','media/VW.webm'); 

} 

function testEnded() { 
     $('#buttons2').removeAttr('hidden'); 
    } 

當我執行changeSrc1()沒有任何反應。我已嘗試刪除代碼 - 無錯誤...

我該怎麼辦？ 謝謝！

Answer 1

我找到了解決方案：顯然，jQuery不支持更改<source>的'src'屬性。錯誤？

Answer 2

比<video> - 標記刪除所有兒童，並創建你插入<video>節點

Answer 3

我已成功地使一些類似工作的新<source>元素：

<video id="video" autoplay="autoplay" controls="controls"> 
<source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 

var video = document.getElementById("video"); 
video.src = "your link here"; 

然而，這是目前給我在IE9的問題。

Answer 4

檢查這個插件，它有一些可能對你有用的屬性。

下載插件

http://videojs.com/

API參考

http://videojs.com/docs/api/

我希望這會幫助你。