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

我設法做了一些類似的工作：

<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 2

檢查此插件，它具有一些對您有用的屬性。

下載插件

http://videojs.com/

API參考

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

希望對您有幫助。

Answer 3

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

Answer 4

而不是從<video> -tag中刪除所有子項，然后創建一個新的<source>元素，然后將其插入到<video>節點中