暂停多个HTML5视频 [英] Pause Multiple HTML5 Videos
问题描述
我在幻灯片中有多个HTML5视频,位于 http://ghostpool.com/wordpress/phideo当我点击任何滑块按钮时,使用以下 onclick
功能暂停第一个视频。
I have multiple HTML5 videos in a slider at http://ghostpool.com/wordpress/phideo and when I click on any of the slider buttons the first video is paused using the following onclick
function.
<a href="#" onclick="pausePlayer();">LINK</a>
var htmlPlayer = document.getElementsByTagName('video')[0];
function pausePlayer() {
htmlPlayer.pause();
}
但是,单击滑块按钮时,第二个视频不会暂停。我假设上面的Javascript不适用于多个视频?
However the second video does not pause when the slider buttons are clicked. I assume the Javascript above does not work with multiple videos?
编辑:此外,如果点击视频元素本身我想切换一个播放和暂停功能。我正在使用此代码,但它会立即播放和停止所有视频。我假设我没有正确循环播放:
Additionally, if clicking on the video element itself I want to toggle a play and pause function. I"m using this code, but it plays and stops all videos at once. I assume I'm not looping it correctly:
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]
部分访问数组中的第一个元素。我想做的是用循环迭代所有这些,如下所示:
This obviously won't work because you are only getting the first element in the array returned by getElementsByTagName
. The [0]
part accesses the first element in the array. What you would want to do is to iterate through all of them with a loop, like this:
var htmlPlayer = document.getElementsByTagName('video');
function pausePlayer() {
for(var i = 0; i < htmlPlayer.length; i++){
htmlPlayer[i].pause();
}
}
修改
关于您的第二个问题 - 您可以尝试使用此代码:
Regarding your second question - You can try using this instead:
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
in a event handler should refer to the element that called it.
这篇关于暂停多个HTML5视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!