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

Answer 1

如果视频无法在 Safari 中运行，但可以在其他浏览器（Chrome、Firefox、Edge）中运行，则您可能会遇到与 字节范围请求 相关的问题。

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

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

Answer 2

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

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

（来源）

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

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

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

Answer 3

在我的例子中，我将 Angular 与 service-worker 一起使用，并且 Safari 没有加载 mp4 文件。

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

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

Answer 4

请记住，您提供的视频需要包含流式传输所需的元数据。

就我而言，我使用 ffmpeg 在服务器中提供编码的动态视频。使用 ffmpeg 命令中的

-movflags faststart

使视频可以在 Safari 上播放

Answer 5

其他解决方法还包括将属性

playsInline

与

muted

一起添加到视频标签。

例如，这样的事情：

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

playsInline

允许浏览器在原处播放视频，而不是默认的起点。

Answer 6

您尝试在视频中使用属性：playsinline，它可以帮助您在 safari 浏览器中播放视频

Answer 7

添加了属性“静音”

--- 视频静音自动播放---

在 Chrome 中一切正常，Safari 也在尝试

Answer 8

我也遇到了类似的问题，视频无法在 Safari 上播放。问题出在我的网络服务器上。我将视频移动到另一个托管服务器，从那里加载它并且它工作了。

例如

而不是：

<video src='/assets/myVideo.mp4' controls> </video>

做这样的事情：

<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>