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 中无法运行，但可以在其他浏览器（Chrome、Firefox、Edge）中运行，则您可能会遇到与字节范围请求相关的问题。

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

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

Answer 2

就我而言，我将 Angular 与 service-worker 一起使用，并且 Safari 不加载 mp4 文件。

Service Worker 破坏了 Byte-range 请求，因为它就像 Safari 和服务器之间的中间人，在这个过程中，SW 将 http 响应代码从 206 更改为 200，这样 Safari 就不会下载 mp4。

为了解决这个问题，当我需要显示 mp4 视频时，我绕过服务工作人员，使用 Angular 8 很简单，只需在 mp4 url​​ 和作品中添加 ngsw-bypass=true 作为查询字符串即可。( https://...video.mp4?ngsw-bypass=true )

Answer 3

Safari已开始（去年）阻止默认情况下自动播放带有音频轨道的视频。据我所知，他们从未对此进行具体宣传，但是我认为这是以下更改的一部分：

Safari 11还通过打开Safari的新“网站”偏好设置面板，使用户可以控制允许哪些网站自动播放视频和音频

（来源）

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

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

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