Включение звука с JS на мобильных и планшетах

Ранее мы писали об ошибке стека воспроизведения 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 видео включение звука).