[英]jQuery and HTML5 video - change source onClick
I have to create an interactive video using HTML5 and jQuery. 我必须使用HTML5和jQuery创建交互式视频。 My goal is to: 我的目标是:
video1
播放video1
video1
ends show button1
, onClick
change to video2
and hide button1
当video1
结束时显示button1
, onClick
更改为video2
并隐藏button1
video2
播放video2
On Ended
show button 2
, OnClick
change to video 3
On Ended
显示button 2
, OnClick
改变video 3
My question to you is, what am I doing wrong? 我对你的问题是,我在做什么错? This is my code. 这是我的代码。
<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>
The function testEnded()
is in an external sheet (which is linked properly to the html). 函数testEnded()
在外部工作表中(已正确链接到html)。 The script is as follows: 脚本如下:
function changeSrc1() {
$('#srcWebm').attr('src','media/VW.webm');
}
function testEnded() {
$('#buttons2').removeAttr('hidden');
}
When I execute changeSrc1()
nothing happens. 当我执行changeSrc1()
没有任何反应。 I have tried linting the code - no errors... 我试过了代码-没有错误...
What should I do? 我该怎么办? Thanks! 谢谢!
I have managed to make something similar work: 我设法做了一些类似的工作:
<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";
However, this is currently giving me issues in IE9. 但是,这目前在IE9中给我带来了问题。
Check this plugin, it has some properties which can be useful for you. 检查此插件,它具有一些对您有用的属性。
Download Plugin 下载插件
API Reference API参考
I hope it will help you. 希望对您有帮助。
I have found the solution: apparently, jQuery does not support changing the 'src' attribute of the <source>
. 我找到了解决方案:显然,jQuery不支持更改<source>
的'src'属性。 Bug? 虫子?
而不是从<video>
-tag中删除所有子项,然后创建一个新的<source>
元素,然后将其插入到<video>
节点中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.