Как приостановить видео, когда нажата кнопка воспроизведения другого видео.

Question

Я думал, что это было бы просто настроить с событием клика, но оно не распознает элементы управления видео html5 как часть видео.

На странице есть еще одно видео с идентификатором video1, настроенным на автовоспроизведение. Второе видео с идентификатором видео2 не переигрывает, но имеет элементы управления html5, чтобы зритель мог его запустить. Я бы хотел, чтобы он был настроен так, что как только кнопка воспроизведения в видео2 выбрана, видео1 перестанет играть.

Вот что я пробовал:

HTML

<video id="video2" controls> 
    <source src="assets/explainer.mp4" type="video/mp4"> 
    This browser does not support HTML5 video 
</video> 

JS

$('#video2').click(function(){ 
    $('#video1').get(0).pause(); 
}); 

Обратите внимание, что если я нажимаю на видео он работает, но нажмите на элементов управления нет.

Answer 1

элемент видео поддерживает его собственные события. playing является одним из них и предупреждает вас, когда начинается воспроизведение видео, либо автовоспроизведение, либо когда нажата кнопка воспроизведения после паузы. Вы должны уметь слушать его вместо события click.

Answer 2

// You heard about classes 

$(".allMyVideos").on("click", function() { 

    // All but not this one - pause 
    $(".allMyVideos").not(this).each(function() { 
     this.pause(); 
    }); 

    // Play this one 
    // this.play(); 

    // Or rather toggle play/pause 
    this[this.paused ? "play" : "pause"](); 

}); 

Или, если у вас есть два ID видео:

var $v1$v2 = $("#video1, #video2"); 

$v1$v2.on("click", function() { 

    // ...not this one - pause 
    $v1$v2.not(this).each(function() { 
     this.pause(); 
    }); 

    // Play this one 
    // this.play(); 

    // Or rather toggle play/pause 
    this[this.paused ? "play" : "pause"](); 

}); 

Answer 3

Вы можете слушать onplay событие:

var vid1 = document.getElementById("video-1");  
var vid2 = document.getElementById("video-2"); 

vid1.onplay = function() { 
    vid2.pause(); 
}; 

надеюсь, что вы можете взять его отсюда :)

You может проверить все варианты, которые вы можете прослушивать на видеоэлементе здесь (просто нажмите play/pause и посмотрите обновления таблицы): https://www.w3.org/2010/05/video/mediaevents.html