Вернуться на предыдущую страницу

Ранее мы писали об ошибке стека воспроизведения HTML5 видео в Chromium браузерах. И она до сих пор актуальна. И она требует небольшого кода, чтобы пользователи в итоге могли смотреть видео, которое автоматически воспроизводится, но при этом СО ЗВУКОМ.

Как же заставить звук включиться? В этом нам поможет чистый-добрый JS, с помощью которого мы включим звук в видео, в котором его выключили (конечно, по требованию Chromium движка)...

Код JS:

<script>
var btn=document.querySelector('.unmute'),
video=document.querySelector('video');
btn.addEventListener('click',function (e) {
e.preventDefault();
btn.innerText='Звук включен';
video.muted=false;
setTimeout(function () {
btn.remove()
},1000)
});
</script>

Где мы используем кнопку и само видео из HTML:

<div class="pr">
<video class="video" poster="https://f.inverser.pro/im_pre/1/NeedFull.NET_videoklip-tina-karol-sdatsya-ty-vsegda-uspeesh.jpg" controls autoplay muted preload="none" src="https://f.inverser.pro/micro/1/NeedFull.NET_videoklip-tina-karol-sdatsya-ty-vsegda-uspeesh.mp4">
</video>
<button class="p cp unmute">Включить звук</button>
</div>

Немного стилей (в основном они для DEMO страницы...):

<style>
main{max-width: 666px;margin: 0 auto}
video{max-width: 100%;width: 100%;height: 50vh;min-height:360px;background:#f5f5f5}
.pr{position: relative}
.p{position: absolute}
button{border:0}
button.unmute{top:10px;left:10px;padding:7px 4px;background:#fff;border-radius: 3px;color: #000}
.cp{cursor: pointer}
</style>

Вот и все готово. Посмотреть живой пример можно по этой ссылке (HTML5 видео включение звука).