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

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

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

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

После долгих поисков и проб нашёл для себя оптимальное решение, состоящее из 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>


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

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

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

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