Question

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

＆＃13;

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

＆＃13;

这在大多数浏览器上运行得非常好（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

如果您使用的是React，请注意属性playsinline必须用camelCase编写： playsInline。

否则它将无法正常工作。

Answer 4

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

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

Answer 5

我遇到了类似的问题，并尝试了多种解决方案。我解决了两个问题。

使用dangerouslySetInnerHtml嵌入<video>代码。例如：

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

调整视频权重。我注意到我的iPhone 无法自动播放3兆字节以上的视频。因此，我使用了在线压缩工具（https://www.mp4compress.com/），将其大小从4mb减小到了500kb以下

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

iPhone上的HTML5视频自动播放

5 个答案: