Приостановить несколько видео HTML5

Question

У меня есть несколько видео HTML5 на слайдере в http://ghostpool.com/wordpress/phideo, и когда я нажимаю на любую из кнопок слайдера, первое видео приостанавливается с помощью следующей функции 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();

    }

}
}

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 в обработчике события должен ссылаться на элемент, который его вызвал.