Автозапуск видео HTML5 на iPhone

У меня какая-то странная проблема. Я пытаюсь создать веб-сайт с зацикленным фоном. Код выглядит следующим образом:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

Ответ 1

Помогает ли атрибут playsinline?

Вот что у меня есть:

        <video autoplay loop muted playsinline class="video-background ">
            <source src="videos/intro-video3.mp4" type="video/mp4">
        </video>

Смотрите комментарий на playsinline здесь: https://webkit.org/blog/6784/new-video-policies-for-ios/

Ответ 2

iOS 10+ позволяют встроить видео автовоспроизведение. но вы должны отключить режим "Низкий уровень мощности" на вашем iPhone.

Ответ 3

Если вы используете React, обратите внимание, что атрибут playsinline должен быть записан в camelCase: playsInline.

Иначе это не сработает.

Ответ 4

Вот небольшой взлом, чтобы преодолеть все трудности, с которыми вы сталкиваетесь при автопроигрывании видео на сайте:

1) Проверьте, воспроизводится ли видео или нет. 2) Запустить воспроизведение видео по событию, например по щелчку тела или касанию.

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

Итак, скрипты для проверки того, воспроизводится ли видео:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

А затем вы можете просто воспроизвести видео, подключив слушателей событий к телу:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Примечание. Атрибут autoplay - это базовый атрибут, который необходимо добавить к тегу video уже, кроме этих сценариев.

Вы можете увидеть рабочий пример с кодом здесь по этой ссылке:

Как автоматически воспроизводить видео, когда устройство находится в режиме пониженного энергопотребления/режиме сохранения данных/проблеме с браузером Safari