Автовоспроизведение HTML5-видео на iPhone

88

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

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
Развернуть фрагмент

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

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

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

ios html video webkit autoplay SeBa
источник
Вы можете найти здесь некоторую помощь: stackoverflow.com/questions/41360490/… Лично мне еще предстоит получить какое-либо видео для автоматического воспроизведения на iphone, даже после выполнения всех этих советов и политик Apple.
Марк
Мне потребовались часы, чтобы понять. Чтобы попытаться сэкономить часы всех остальных, я подытожил свои выводы в блоге. Надеюсь, это поможет. medium.com/@BoltAssaults/...
BoltCoder

Ответы:

215

Есть ли 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/

Пит Флоренс
источник
1
Аллилуйя! Спасибо за это, попробовал еще около десятка других решений, но безрезультатно.
tolmark
23
playsinlineработал у меня вместе с mutedучетом особенностей режима низкого энергопотребления на iPhone
Кен
1
Это ответ.
JCraine
1
playsinlineСпас день !!!! Спасибо чувак. Кстати, новые политики браузера требуют, чтобы, если вы хотите автоматически запускать видео, запускайте его без звука, иначе вы не сможете это сделать. +1 к @ken Пример для Chrome: [ developers.google.com/web/updates/2017/09/…
Nuno Prata
18
Если вы используете React, заметьте , что атрибут playsinlineдолжен быть записан в верблюжьего: playsInline. Иначе не получится.
Quentin D
62

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

Дилип Годхани
источник
2
отличный совет, но у меня есть вопрос по этому поводу, который я отправил: stackoverflow.com/questions/50400902/…
Mathieu
7
Я провел последний час или около того, пытаясь понять, почему мои видео не воспроизводятся автоматически. Спасибо тебе за это!
Лиор
2
Спасибо тебе за это!
Никита Рогатнев
4
Стоит отметить, что мы не можем управлять устройством пользователя и включать режим низкого энергопотребления. Единственное, что мы можем сделать, это предложить пользователю «Выключить режим пониженного энергопотребления», чтобы получить лучший опыт
Мухаммад Усама
1
Это случилось и со мной, и сводило меня с ума, пока я не нашел ваш пост. Я уже смотрел спецификации Safari 11 и 11.1, возможно, они полностью отключили автовоспроизведение, но это был только режим с низким энергопотреблением ... жизнь разработчиков может быть тяжелой. :-)
haeki 09
7

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

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

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

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

Шакти
источник