iPhone上的HTML5视频自动播放

我有一个奇怪的问题。我尝试创建一个带有循环背景视频的网站。代码如下所示：

<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不会解决它
Wifi或Cellular没什么用
视频文件大小也无济于事

我做错了吗，还是iPhone不会自动播放视频并始终需要交互？我只关心iOS 10，我知道iOS 9的要求有所不同

— 硒巴
source

您也许可以在这里找到一些帮助：stackoverflow.com/questions/41360490/…就我个人而言，即使遵循了所有这些技巧和Apple的规定，我仍然无法在iPhone上自动播放任何视频。

— 标记

我花了几个小时才弄清楚。为了节省其他人的时间，我在博客中总结了我的发现。希望能帮助到你。 medium.com/@BoltAssaults/...

— BoltCoder

Answers:

214

是否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/

— 彼得·佛罗伦萨
source

哈雷路亚！谢谢您这样做，尝试了大约十二种其他解决方案，但无济于事。

— tolmark

playsinline为我工作时要muted牢记iPhone上的低功耗模式怪癖

— 肯（Ken）

这就是答案。

— JCraine

playsinline保存了一天！！！谢啦。顺便说一句，新的浏览器政策要求，如果您要自动启动视频，请将其静音，否则将无法播放。1到@ken实施例为铬：[ developers.google.com/web/updates/2017/09/...

— 努诺煎饼

如果您使用的是React，请注意该属性playsinline必须使用camelCase：编写playsInline。否则它将无法正常工作。

— Quentin D

iOs 10+允许内联视频自动播放。但您必须在iPhone上关闭“低功耗模式”。

— 迪利普·戈达尼（Dilip Godhani）
source

很棒的提示，但是我对此有一个疑问：stackoverflow.com/questions/50400902/…–

— Mathieu

我花了大约一个小时的时间，试图了解为什么我的视频没有自动播放。这次真是万分感谢！

— lior

这次真是万分感谢！

— Nikita Rogatnev，

值得一提的是，我们无法控制用户的设备并无法进入低功耗模式。我们唯一能做的就是提示用户“关闭低功耗模式”以获得更好的体验

— Muhammad Osama

也发生在我身上，把我逼疯了，直到找到你的职位。我已经在研究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属性是非常基本的属性，除了这些脚本外，还需要将其添加到视频标签中。

您可以在以下链接中看到带有代码的工作示例：

设备处于低功耗模式/数据保存模式/ Safari浏览器问题时如何自动播放视频

— 沙克蒂
source