Автозапуск видео IPhone в режиме пониженного энергопотребления не работает

Question

У меня есть видео, которое является неотъемлемой частью моего дизайна, и при загрузке видео воспроизводится на всех устройствах, кроме iPhone, в режиме низкого энергопотребления. Используя атрибут autoplay, видео будет загружаться в большинстве браузеров.

<div class="footage">
    <video width="320" height="240" autoplay muted playsinline loop id="videoMob">
        <source src="./img/video.mp4" type="video/mp4">
    </video>
</div>

Обнаружив, что это не работает, я решил добавить функцию .ready в jquery, которая активирует видео для воспроизведения, если оно приостановлено при загрузке. К сожалению, это тоже не сработало.

$( document ).ready(function() {
    var video = $('#videoMob')[0];
    video.paused ? video.play() : video.pause();
});

Пожалуйста, предложите какие-нибудь другие идеи?

Answer 1

С этим тоже столкнулся и обнаружил, что iOS использует событие suspend (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event) в режиме пониженного энергопотребления. Это событие действительно происходит после того, как видео загрузило несколько кадров и выдает некоторые из них при событиях загрузки .

Используя это событие suspend, мы можем показать запасной интерфейс. В целях безопасности мы можем отменить этот пользовательский интерфейс, если видео когда-либо воспроизводится снова, например, при взаимодействии с пользователем.

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('suspend', () => {
  // suspended loading. Show play UI..
});

videoElement.addEventListener('play', () => {
  // remove play UI
});