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 我应该点击播放按钮。我不需要视频的任何控件，所以我删除了控件。

原文由 Krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Safari 已经开始（在去年）默认情况下阻止带有音轨的视频自动播放。据我所知，他们从未具体公开过这一点，但我相信这是以下变化的一部分：

Safari 11 还允许用户通过打开 Safari 新的“网站”首选项面板来控制允许哪些网站自动播放视频和音频

（ 来源）

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

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

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

原文由 DBS 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果视频在 Safari 中不工作，但在其他浏览器（Chrome、Firefox、Edge）中工作，您可能遇到了与 字节范围请求 相关的问题。

字节范围请求 是指客户端仅向服务器请求所请求文件的特定部分。这样做的主要目的是通过仅根据需要下载文件的一小部分（在您的情况下是视频）来节省带宽使用。如果您检查 Safari 视频请求，您可能会注意到 Range 标头设置为 bytes=0-1。这是 Safari 测试您的 HTTP 服务器在请求更大数据块之前是否接受字节范围的方法。

要修复您的服务器配置， 请查看 Apple 的建议。如果您需要快速修复，您可以将您的视频移动到具有适当配置的不同托管服务器（并确保更新所有视频源参考）。

原文由 jberg7777 发布，翻译遵循 CC BY-SA 4.0 许可协议