Отключить все видео HTML5

Question

Я ищу способ отключить все видео HTML5 на сайте с помощью одного видео.Я разрабатываю приложение, которое использует модальные окна для отображения контента.Часть этого контента - HTML5 видео.Когда пользователь воспроизводит видео, а затем решает закрыть модальное окно, содержащее это видео, я бы хотел, чтобы оно прекратилось.

Я пробовал метод, подобный следующему:

function stopVideo() {
    // Make sure to turn off and reset the video
    $( '.html5-video' ).each( function( index, element ) {
        $( this ).get( 0 ).currentTime = 0;
        $( this ).get( 0 ).pause();
    } );
}

Это отлично работает в Safari;однако в FireFox и Chrome выдается ошибка, указывающая на то, что, поскольку элемент скрыт, он больше не используется.У кого-нибудь есть идеи, как надежно остановить все видео?

Спасибо!

Answer 1

Прежде всего, есть кое-что, что вы должны узнать о jQuery. Каждый раз, когда вы вызываете $ () (с некоторыми аргументами), создается новый объект jQuery, что плохо сказывается на производительности. Если вы выполняете вызов $ () с теми же аргументами, вы должны кэшировать результат, поэтому в вашем случае это будет:

var video_object = $(this).get(0);
video_object.currentTime = 0;
video_object.pause();

Во-вторых, когда вы выполняете каждый цикл с помощью jQuery, контекст вашей функции (this) и второй аргумент являются html-объектами. Так что оборачивать их в метод $ () и затем делать .get (0) не имеет смысла.

Так что это так же, как ваш метод:

function stopVideo() {
    // Make sure to turn off and reset the video
    $( '.html5-video' ).each( function( index, element ) {
      element.currentTime = 0;
      element.pause();
    } );
}

Вернемся к вашей проблеме сейчас. Можете ли вы привести пример или некоторые подробности, потому что приведенный выше код работает для меня без ошибок (http://jsfiddle.net/klaascuvelier/fypAR/)