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

【问题标题】：HTML video not playing in Safari browserHTML 视频无法在 Safari 浏览器中播放
【发布时间】：2018-10-14 13:47:04
【问题描述】：

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

【问题讨论】：

您的问题可能与https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa有关
根据@Mahuna 提到的帖子，您应该添加playsinline 属性。

标签： html

【解决方案1】：

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

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

(Source)

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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)

【讨论】：

谢谢您，先生。我浪费了半天时间试图解决这个问题，这终于在 iOS Safari 上运行了。事实证明，这个问题仍然非常普遍（参见 GitHub、Stackoverflow，...），但没有人建议这种解决方法。
我也有同样的问题，角度，服务人员，野生动物园。并用你的答案解决！谢谢！

【解决方案4】：

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

就我而言，我使用 ffmpeg 在服务器中提供编码的动态视频。在 ffmpeg 命令中使用 -movflags faststart 使视频可在 Safari 上播放

【讨论】：

【解决方案5】：

其他解决方法还包括将属性playsInline 与muted 一起添加到视频标签中。

例如，像这样的：

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

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

【讨论】：

【解决方案6】：

添加了“静音”属性

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

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

【讨论】：

目前尚不清楚您的回答是什么意思。你在哪里添加这个属性？ “Safari 也在尝试”是什么意思？

【解决方案7】：

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

例如

代替：

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

做这样的事情：

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

【讨论】：