Как остановить проигрывание одного видео при запуске другого (HTML5-видео)

Как остановить проигрывание одного видео при запуске другого (HTML5-видео)

Прорабатывая один из сайтов, на страницах которого размещается несколько видео в тегах <video> я столкнулся с проблемой, когда запускаешь одно видео и если его вручную не остановить, и запустить второе видео, то начинается какофония и все видео вещают одновременно.

Появилась задача, которую необходимо было решить. Начал изучать вопрос как остановить одно видео при запуске другого видео и при этом не привязываться к конкретным видео, т.е. требуется найти идеальное решение, когда останавливаются все видео при запуске какого-либо видео.

После долгих поисков и проб нашёл для себя оптимальное решение, состоящее из JavaScript. Фиксирую данное решение у себя в блоге, на случай если оно мне понадобится ещё раз в будущем. Скрипт останавливает все видео, кроме запускаемого пользователем.

Привожу полное готовое решение (вдруг в будущем забудется 😊).

JavaScript

<script>
$(document).ready(function(e) {
    $('audio,video').bind('play', function() {
    activated = this;
    $('audio,video').each(function() {
        if(this != activated) this.pause();
    });
});
// Для flash
$(".video-js").click(function(){
    activated = this;
    $('.video-js').each(function() {
        if(this != activated) _V_($(this).attr("id")).pause();
    });
});
});
</script>

Код проигрывателя 1

<video poster="https://victorz.ru/victorz-1.png" preload="metadata" controls="controls" controlslist="nodownload">
  <source src="https://victorz.ru/victorz-1.mp4" type="video/mp4" />
  <source src="https://victorz.ru/victorz-1.webm" type="video/webm" />
  <source src="https://victorz.ru/victorz-1.ogv" type="video/ogg" />
</video>

Код проигрывателя 2

<video poster="https://victorz.ru/victorz-2.png" preload="metadata" controls="controls" controlslist="nodownload">
  <source src="https://victorz.ru/victorz-2.mp4" type="video/mp4" />
  <source src="https://victorz.ru/victorz-2.webm" type="video/webm" />
  <source src="https://victorz.ru/victorz-2.ogv" type="video/ogg" />
</video>

Встраивание

Для встраивания нам необходимо в требуемом нам месте на страницах разместить коды проигрывателей. Их может быть сколько угодно.

Код JavaScript вставляем единожды между тегами <head></head> или в любом месте на странице. К примеру, в WordPress есть блок HTML-код, в который можно вставить этот код:

Как остановить проигрывание одного видео при запуске другого (HTML5-видео)

3 комментария

  1. Дмитрий

    Спасибо. Обязательно пригодится)))

  2. Добрый день! Можно подробно, как подключить скрипт?

    • Захаров Виктор

      Немного переписал статью и внёс пояснения о встраивании.

Добавить комментарий

Ваш адрес email не будет опубликован.