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上却可以.我已经阅读了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();
        }
});

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

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

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

Answer 4

我遇到了类似的问题，并尝试了多种解决方案。我通过考虑两个因素解决了这个问题。

1. 用于dangerouslySetInnerHtml嵌入<video>代码。例如：

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

2. 调整视频重量。我注意到我的 iPhone无法自动播放超过 3 MB 的视频。所以我使用了在线压缩工具（https://www.mp4compress.com/）将 4mb 压缩到小于 500kb

另外，感谢@boltcoder的指导：Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)