如果定位在视口之外，html5 视频不会在 OSX Safari 中自动播放

Posted 2023-02-19

【中文标题】如果定位在视口之外，html5 视频不会在 OSX Safari 中自动播放

【英文标题】：html5 video does not autoplay in OSX Safari if positioned outside the viewport

【发布时间】：2018-03-14 11:52:07

【问题描述】：

我正在尝试在网页上自动播放和内联 html5 视频。这适用于所有浏览器和所有设备（某些 android 设备除外）。但是，如果您将视频放在页面的下部（视口之外）并向下滚动到它，则视频在 OSX Safari（版本 11）中不再自动播放。其他浏览器（如 Firefox 和 Chrome）不会显示此问题。

当您向下滚动、显示视频并刷新页面时，视频将自动播放。

<video id="videoheader" playsinline autoplay="autoplay" muted loop data-flashblockwhitelisted="true" poster="posterimage.jpg">
            <source src="video.mp4">
</video>

该网站仍在开发中（尚未上线），但也显示此问题的页面的一个很好的示例是：

http://www.pixomondo.com/

视频位于页面下方，不会在 Safari 中自动播放。

Apple 似乎已禁用视口外 html5 视频的自动播放功能。在旧版本的 Safari（6.1.6 版）中表现良好。

任何建议或代码示例如何解决这个问题？

【问题讨论】：

没有办法绕过它。这是野生动物园的新现实。

【参考方案1】：

您的视频似乎是自动播放和静音的 - 存在一个已知问题，该问题已在稍后的 Safari 版本中解决，可能会解决此问题 [我的粗体字]：

媒体

实现了 onencrypted 事件的 HTMLMediaElement 调度 修复了在视口外不播放的自动播放静音视频 修复了 HTMLTrackElement 行为以匹配标准

有关预览版的更多信息，请点击此处：https://developer.apple.com/safari/technology-preview/release-notes/

您可以在此处下载预览版本以验证这是否解决了您的问题：https://developer.apple.com/safari/download/

【讨论】：

刚刚在 Safari Technology Preview 中测试过，问题确实解决了。非常感谢您的回答！