[英]Pause Multiple HTML5 Videos
我在http://ghostpool.com/wordpress/phideo的一个滑块中有多个HTML5视频,当我单击任意一个滑块按钮时,使用以下onclick
函数会暂停第一个视频。
<a href="#" onclick="pausePlayer();">LINK</a>
var htmlPlayer = document.getElementsByTagName('video')[0];
function pausePlayer() {
htmlPlayer.pause();
}
但是,单击滑块按钮时,第二个视频不会暂停。 我认为上面的Javascript不适用于多个视频吗?
编辑:此外,如果单击视频元素本身,我想切换播放和暂停功能。 我正在使用此代码,但它会同时播放和停止所有视频。我认为我没有正确循环播放它:
function togglePlayer() {
for(var i = 0; i < htmlPlayer.length; i++){
if ( htmlPlayer[i].paused || htmlPlayer[i].ended ) {
if ( htmlPlayer[i].ended ) { htmlPlayer[i].currentTime = 0; }
htmlPlayer[i].play();
} else {
htmlPlayer[i].pause();
}
}
}
这显然不起作用,因为您只获得了getElementsByTagName
返回的数组中的第一个元素。 [0]
部分访问数组中的第一个元素。 您想要做的是使用一个循环迭代所有这些循环,如下所示:
var htmlPlayer = document.getElementsByTagName('video');
function pausePlayer() {
for(var i = 0; i < htmlPlayer.length; i++){
htmlPlayer[i].pause();
}
}
编辑
关于第二个问题-您可以改用以下方法:
for(var i = 0; i < htmlPlayer.length; i++){
htmlPlayer[i].onclick = function() {
if ( this.paused || this.ended ) {
if ( this.ended ) { this.currentTime = 0; }
this.play();
} else {
this.pause();
}
}
}
this
在事件处理程序中应该引用调用它的元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.