iPhone上的HTML5视频自动播放

Question

我有一个奇怪的问题。我尝试创建一个带有循环背景视频的网站。代码看起来像这样：

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

[在大多数浏览器上都可以很好地工作（IE很难解决这种适合对象的事情，但我不介意），但是在iPhone上视频无法自动播放，但在iPad上可以。我已经读过New Policies for iOS，并且认为符合要求（否则iPad无法自动播放）。我做了其他测试：

• 删除覆盖的div无法解决
• 删除z-index不会解决
• Wifi或Cellular没什么关系
• 视频文件大小也没有影响

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

Answer 1

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/

Answer 2

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

Answer 3

这里是克服您在网站上进行视频自动播放的所有努力的小技巧：

1）检查视频是否正在播放。2）在诸如单击或触摸身体等事件时触发视频播放。

注意：某些浏览器不允许视频自动播放，除非用户与设备进行交互。

所以检查视频是否正在播放的脚本是：

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();
        }
});

注意：自动播放属性是非常基本的属性，除了这些脚本外，还需要将其添加到视频标签中。

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

How to autoplay video when device is in low power mode / data saving mode / safari browser issue