HTML 视频无法在 Safari 浏览器中播放

Question

下面的代码在 Mozilla 和 Chrome 中运行良好。但在 Safari 中，视频无法播放。

<video id="v-control" width="100%" autoplay="autoplay" loop>
    <source src="assets/img/web home page banner.mp4" type="video/mp4" 
    media="all and (max-width: 480px)">
    <source src="video-small.webm" type="video/webm" media="all and 
    (max-width: 480px)">
    <source src="assets/img/web home page banner.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

我已经为视频标签尝试了 preload，如果我添加了 controls，我应该点击播放按钮。我不需要视频的任何控件，所以我删除了控件。

Answer 1

Safari 已开始(去年)阻止默认情况下自动播放带有音轨的视频。据我所知，他们从未特别宣传过这一点，但我相信这是以下变化的一部分:

Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane

( Source )

唯一真正的解决方法是从视频中删除音轨，或者默认将其静音。

<video id="v-control" width="100%" autoplay="autoplay" loop muted>

如果您的服务器可以检测到请求者的浏览器，您可以将其仅应用于 Safari，而让其他浏览器保持原样。