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()时，没有任何反应。我试过linting代码 - 没有错误......

我该怎么办？ 谢谢！

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

我找到了解决方案：显然，jQuery不支持更改<source>的'src'属性。错误？

Answer 3

删除<video> - 标记中的所有子项，并创建一个新的<source>元素，并将其插入<video>节点

Answer 4

检查此插件，它有一些对您有用的属性。

下载插件

  

http://videojs.com/

API参考

  

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

我希望它会对你有所帮助。