Question

我有一个视频，它是我设计中不可或缺的，在低功耗模式下，该视频可以在除iPhone之外的所有设备上播放。使用自动播放属性，视频将在大多数浏览器中开始加载。

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

在发现这行不通之后，我决定在jquery中添加一个.ready函数，以激活视频（如果在加载时暂停）以播放视频。令人失望的是，这也行不通。

$( 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事件，我们可以显示一个后备UI。为了安全起见，如果视频再次播放（例如在用户互动时），我们可以还原该用户界面。

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

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

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

自动播放视频iPhone低功耗模式不起作用

1 个答案: