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

Question

我正在尝试在网页上自动播放和内嵌 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）中表现良好。

关于如何解决此问题的任何建议或代码示例？

Answer 1

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

Media

Implemented HTMLMediaElement dispatch of the onencrypted event

Fixed autoplay muted videos not playing when outside the viewport

Fixed HTMLTrackElement behavior to match standards

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

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

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

html5 video does not autoplay in OSX Safari if positioned outside the viewport

html

safari

macos

video

autoplay