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 或蜂窝网络没有​​区别
• 视频文件大小也没有影响

是我做错了还是 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 属性非常基本，除了这些脚本之外，还需要添加到视频标签中。

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

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

Answer 4

我遇到了类似的问题，我尝试了多种解决方案。我解决了它实施 2 个注意事项。

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

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

1. 调整视频权重。我注意到我的 iPhone 不会自动播放超过 3 兆字节的视频。所以我使用了一个在线压缩工具 (https://www.mp4compress.com/) 从 4mb 到小于 500kb

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

Answer 5

这是一个在 IOS 中自动播放视频的简单解决方案，我已经尝试过，它在 IOS、Android 以及各种平台上的所有浏览器上都可以完美运行。

只需对视频使用 (data-wf-ignore) 和 (data-object-fit) 属性，对源标签使用 data-wf-ignore..

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

<video id="myVideo" autoplay="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" data-wf-ignore="true" />
</video>

Answer 6

我遇到了同样的问题 - 视频无法在 iOS 上播放。我尝试了所有代码选项“playsinline 自动播放循环静音”。问题是我收到的视频使用了错误的 mp4 编解码器。所以帮助我们的是将视频上传到 Vimeo 并再次下载高清版本。该视频现在正在所有移动设备上播放。

您也可以尝试使用 mpeg streamclip。这是 VLC 的屏幕剪辑 - 这些是正确的设置。希望有人不必花 2 个小时来寻找问题 - 节日快乐