Прорабатывая один из сайтов, на страницах которого размещается несколько видео в тегах <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 data-src="https://victorz.ru/victorz-1.mp4" type="video/mp4" /> <source data-src="https://victorz.ru/victorz-1.webm" type="video/webm" /> <source data-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 data-src="https://victorz.ru/victorz-2.mp4" type="video/mp4" /> <source data-src="https://victorz.ru/victorz-2.webm" type="video/webm" /> <source data-src="https://victorz.ru/victorz-2.ogv" type="video/ogg" /> </video>
Встраивание
Для встраивания нам необходимо в требуемом нам месте на страницах разместить коды проигрывателей. Их может быть сколько угодно.
Код JavaScript вставляем единожды между тегами <head></head> или в любом месте на странице. К примеру, в WordPress есть блок HTML-код, в который можно вставить этот код:
спасибо бро!!!
СПАСИБО БРО!!!
Добрый вечер. А можно для мобильных как-то это реализовать? Чтобы при касании видео запускалось, а при касании на другое видео, предыдущее останавливалось. Спасибо.) То есть, заменить псевдокласс :hover каким-то образом. В сети много материала на эту тему, но все примеры с одним видео, а вот с несколькими видео на странице непонятно как сделать)
Добрый день! Можно подробно, как подключить скрипт?
Немного переписал статью и внёс пояснения о встраивании.
Спасибо. Обязательно пригодится)))