javascript - 暂停多个 HTML5 视频

Question

我在 http://ghostpool.com/wordpress/phideo 的 slider 中有多个 HTML5 视频当我点击任何 slider 按钮时，第一个视频会使用以下 onclick 函数暂停。

<a href="#" onclick="pausePlayer();">LINK</a>


var htmlPlayer = document.getElementsByTagName('video')[0];

function pausePlayer() {
  htmlPlayer.pause();
}

但是，当单击 slider 按钮时，第二个视频不会暂停。我假设上面的 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();

    }

}
}

Answer 1

这显然是行不通的，因为您只能获取 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 应该引用调用它的元素。