Автовідтворення відео HTML5 на iPhone

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

<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-index не виправить
Wi-Fi або стільниковий не має значення
Розмір відеофайлу теж не має значення

Я роблю це неправильно, або iPhone просто не відтворює відео автоматично і завжди вимагає взаємодії? Я піклуюся лише про iOS 10, я знаю, що вимоги до iOS 9 були різними

— SeBa
джерело

Ви можете знайти тут якусь допомогу: stackoverflow.com/questions/41360490/ ... Особисто я ще не отримав жодного відео для автоматичного відтворення на iphone, навіть після дотримання всіх цих порад та політики щодо яблук.

— Позначте

На це мені зайняли години. Щоб спробувати заощадити години всіх інших, я підсумував свої висновки у блозі. Сподіваюся, це допоможе. medium.com/@BoltAssaults/…

— BoltCoder

Відповіді:

217

Чи 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/

— Піт Флоренція
джерело

Алілуя! Дякую за це, спробував близько десятка інших рішень безрезультатно.

— tolmark

playsinlineпрацював для мене спільно, mutedмаючи на увазі химерність режиму низького енергоспоживання на iPhone

— Кен

Це відповідь.

— JCraine

playsinlineВрятував день !!!! Спасибі людино. До речі, нові політики браузера вимагають, що якщо ви хочете автоматично запустити відео, запустіть його приглушеним, інакше ви не зможете цього зробити. +1 до @ken Приклад для chrome: [ developers.google.com/web/updates/2017/09/…

— Нуно Прата,

Якщо ви використовуєте React, зауважте , що атрибут playsinlineповинен бути записаний в верблюжого: playsInline. Інакше це не спрацює.

— Квентін Д

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

— Діліп Годхані
джерело

чудова порада, але у мене є питання щодо цього, яке я подав: stackoverflow.com/questions/50400902/…

— Матьє,

Я витратив останню годину, намагаючись зрозуміти, чому моє відео не відтворюється автоматично. Дякую за це!

— lior

Дякую за це!

— Микита Рогатнєв

Варто зазначити, що ми не можемо керувати пристроєм користувача та перемиканням режиму низького енергоспоживання. Єдине, що ми можемо зробити, це запропонувати користувачеві "Вимкнути режим низького енергоспоживання", щоб отримати кращий досвід

— Мухаммад Усама

Це теж сталося зі мною і зводило мене з розуму, поки я не знайшов твій пост. Я вже розглядав специфікації Safari 11 та 11.1, якщо вони, можливо, повністю відключили автовідтворення, але це був лише режим низької потужності ... життя розробників може бути важкою. :-)

— haeki

Ось маленький хак, щоб подолати всі труднощі, які ви маєте для автоматичного відтворення відео на веб-сайті:

Перевірте, чи відтворюється відео.
Увімкніть відтворення відео на такій події, як клацання або дотик.

Примітка. Деякі браузери не дозволяють відео відтворюватися автоматично, якщо користувач не взаємодіє з пристроєм.

Отже, сценарії для перевірки відтворення відео:

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атрибут є дуже простим, який потрібно додати до відео тегу, крім цих сценаріїв.

Ви можете побачити робочий приклад з кодом тут за цим посиланням:

Як автоматично відтворювати відео, коли пристрій перебуває в режимі низького енергоспоживання / режимі економії даних / проблема браузера сафарі

— Шакті
джерело