iPhone Apple Safari VS автоматический запуск видео (video html)

17.02.2024

Вам потребовалось разместить на сайте видео и сделать его с автоматическим запуском? В 2024 году нет ничего проще... казалось бы.

Начнем с того, что в Google Chrome autoplay не работает, но это самая маленькая проблема. Лечится это тем, что нельзя (по политике безопасности и заботе о пользователях?) делать видео с автостартом и звуком одновременно нельзя.

Решение: добавляем еще атрибут muted:

 
<video muted="" autoplay="">

А теперь, собственно, о iPhone Apple и Safari:

Нужно добавить, кроме muted еще и playsinline, но и это не работает. Поэтому нужно докинуть чуть-чуть JS:

 
<video class="bg__video" disablePictureInPicture loop="" muted="" autoplay="" playsinline preload="auto" poster="/poster.jpg">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

<script>
    let isPlaying = false;
    function playVideo(e) {
        if (isPlaying)
            return
        if ( e && e.type ) {
            console.log( `${e.type}: start loading video` );
        } else {
            console.log( 'Page is loaded: start loading video' );
        }
        isPlaying = true;
        console.log('start play video')
        document.querySelector('.bg__video')?.play()
        window.removeEventListener('load', fallBack)
        window.removeEventListener('touchstart', playVideo)
        document.removeEventListener('scroll', playVideo)
        document.removeEventListener('mouseenter', playVideo)
        document.removeEventListener('click', playVideo)
    }
    function fallBack() {
        setTimeout(playVideo, 2000)
    }
    window.addEventListener('load', fallBack)
    window.addEventListener('touchstart', playVideo)
    document.addEventListener('scroll', playVideo)
    document.addEventListener('mouseenter', playVideo)
    document.addEventListener('click', playVideo)
</script>

Категории: HTML, CSS