iPhone 上的 HTML5 视频自动播放

Posted 2023-03-05

【中文标题】iPhone 上的 HTML5 视频自动播放

【英文标题】：HTML5 Video autoplay on iPhone

【发布时间】：2017-09-20 02:15:54

【问题描述】：

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

<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 的要求不同

【问题讨论】：

您也许可以在这里找到一些帮助：***.com/questions/41360490/… 就我个人而言，即使遵循了所有这些提示和 Apple 政策，我还没有获得任何可以在 iphone 上自动播放的视频。跨度>

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

复制：***.com/questions/39259418/…

【参考方案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/

【讨论】：

哈利路亚！谢谢你，已经尝试了大约十几个其他解决方案都无济于事。

playsinline 与 muted 一起为我工作，记住 iPhone 上的低功耗模式怪癖

这就是答案。

playsinline 拯救了这一天！！！！谢啦。顺便说一句，新的浏览器政策要求如果您想自动启动视频，请将其静音启动，否则您将无法执行此操作。 +1 到 @ken chrome 示例：[developers.google.com/web/updates/2017/09/…

如果你使用 React，请注意属性playsinline 必须用驼峰写法：playsInline。否则将无法正常工作。

【参考方案2】：

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

【讨论】：

很好的提示，但我对此有疑问，我已提交：***.com/questions/50400902/…

我花了最后一个小时左右试图了解为什么我的视频没有自动播放。谢谢你！

谢谢！

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

也发生在我身上，让我发疯，直到我找到你的帖子。我已经在查看 Safari 11 和 11.1 的规格，如果它们可能会完全禁用自动播放，但这只是低功耗模式……开发人员的生活可能很艰难。 :-)

【参考方案3】：

这是一个小技巧，可以帮助您克服在网站中自动播放视频的所有困难：

检查视频是否正在播放。 在身体点击或触摸等事件上触发视频播放。

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

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

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

【参考方案4】：

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

使用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+)

【参考方案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>

【参考方案6】：

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

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

【讨论】：

playsinline 为我工作。谢谢分享！