OGeek|极客世界-中国程序员成长平台

标题: javascript - 自动播放视频 iPhone 低功耗模式不起作用 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 22:06
标题: javascript - 自动播放视频 iPhone 低功耗模式不起作用

我有一个视频，它是我设计中不可或缺的一部分，加载时视频在除 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();
});

请提出任何其他想法？

---

Best Answer-推荐答案

也遇到过这个问题，发现 iOS 在低功耗模式下使用 suspend 事件 (https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event)。此事件实际上发生在视频加载了几帧并发出一些加载事件之后。

使用这个 suspend 事件，我们可以显示一个备用 UI。为安全起见，如果视频再次播放(例如在用户交互时)，我们可以恢复此 UI。

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

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

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

关于javascript - 自动播放视频 iPhone 低功耗模式不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54379718/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4