Автоигра HTML5 Video на iPhone

Question

Дополнительно

Источник Неподдерживаемая версия AMP Редактировать

Автоигра HTML5 Video на iPhone

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

& Лт;!- начать фрагмент: js hide: ложная консоль: истинная павиана: false - >

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

& Лт;!- конец фрагмента - >

Это прекрасно работает в большинстве браузеров (IE борется с этой подходящей вещью, но я не против), но на iPhone видео не будет автоматически воспроизводиться, но на iPad это происходит. Я уже прочитал Новое < video > Политики для iOS, и я думаю, что я отвечаю требованиям (в противном случае iPad не будет автоматически запускаться). Я сделал еще один тест:

Удаление наложения див не исправит это
Удаление z-индекса не исправит это
Wi-Fi или сотовая связь не имеет значения
Размер видео тоже не имеет значения

Я делаю это неправильно или iPhone просто не будет автоматически воспроизводить видео и всегда требует взаимодействия? Меня волнует только iOS 10, я знаю, что требования к iOS 9 были другими

TylerH

Редактировал вопрос 12-го июня 2018 в 4:20

Программирование

html5 ios video webkit autoplay

23-го апреля 2017 в 11:18

27 просмотров

Комментарии к вопросу (1)

Pete Florence · Answer 1 · 2017-07-30T17:26:15+00:00

Pete Florence

Источник Неподдерживаемая версия AMP Редактировать

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

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

        <amp-video autoplay loop muted playsinline class="video-background ">

        </amp-video>

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

126

0

Комментарии (9)

Dilip Godhani · Answer 2 · 2018-03-06T17:55:23+00:00

Dilip Godhani

Источник Неподдерживаемая версия AMP Редактировать

iOs 10+ позволяют встроенному видео-автоплайу. но вы должны отключить «Режим низкого питания» на вашем iPhone.

halfer

Редактировал ответ 12-го июня 2018 в 4:18

35

0

Комментарии (5)

Shakti · Answer 3 · 2019-10-06T05:51:07+00:00

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

Проверьте видео играет или нет.
Запустите воспроизведение видео на мероприятии, например, щелчок или касание тела.

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

Таким образом, сценарии, чтобы проверить, воспроизводится ли видео:

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 очень прост, и его необходимо добавлять в тег видео, отличный от этих сценариев.

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

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