javascript - jQuery 和 HTML5 视频 - 更改源 onClick

Question

我必须使用 HTML5 和 jQuery 创建交互式视频。我的目标是:

1. 播放视频1
2. 当video1结束时显示button1，onClick更改为video2并隐藏button1 >
3. 播放视频2
4. On Ended 显示按钮 2，OnClick 更改为视频 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 中给我带来了问题。