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>-tag 中删除所有子元素，然后创建一个新的<source> 元素，将其插入<video> 节点

Answer 4

检查这个插件，它有一些对你有用的属性。

下载插件

http://videojs.com/

API 参考

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

希望对你有帮助。