Safari 上的 HTML5 视频问题答案

【问题标题】：HTML5 video problems on SafariSafari 上的 HTML5 视频问题
【发布时间】：2018-12-28 02:11:20
【问题描述】：

我遇到的问题是视频在 Safari 中无法播放，但在 Chrome 和 Firefox 中效果很好。

<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>

获取来自 VLC 编解码器的信息：

视频 h.264/mpeg-4 avc

音频 mpeg aac 音频 mp4a

【问题讨论】：

您知道我们无法真正帮助您处理您给我们的东西吗？好的，所以您设法在一行中包含无效的 HTML，但这应该不是问题。问题可能在于您的视频编码的编解码器。您可以尝试使用其他视频文件吗？例如，当您将 url 设置为 http://media.w3.org/2010/05/bunny/movie.mp4 时会发生什么？您能否尽量缩小您的问题范围，以便我们知道我们在寻找什么？和 Safari 的问题一样，我必须问您使用的是什么版本？
Safari 12，这是一个视频emotionlife.ru/api/files/lessons/1545307946319.mp4
获取 fom VLC 编解码器信息：视频 h.264/mpeg-4 avc，音频 mpeg aac 音频 mp4a

标签： html safari

【解决方案1】：

这确实是 Safari（至少 12.0.2）中的一个错误*，它不接受将这个 300MB video 作为来自 MediaElement 的单个请求获取。
他们拼命尝试发出 Range 请求，但您的主机不允许此类请求。您可以通过在其他浏览器中未完全加载的情况下尝试在视频中搜索来查看它。

您可以通过任一方式解决该问题

设置您的服务器，使其接受 Range 请求（这将是最好的解决方案，即使对于其他浏览器也是如此）。
出错时，通过 AJAX 获取整个文件并从内存中播放（作为 Blob）。但这意味着要等待 400MB 的下载。
如果出错，获取文件并将ReadableStream 使用其appendStream() 方法通过管道传送到MediaSource 的SourceBuffer。但是目前还没有浏览器支持它...

_{*虽然我发现 this link 说“为 iOS 托管媒体文件的 HTTP 服务器必须支持字节范围请求”，所以它适用于 iOS，但它们可能有桌面的相同限制。但是他们不支持非范围请求听起来像是一个错误，因为它违反了规范。}

【讨论】：

我有大小为 28.1MB 的视频，但它也无法正常工作
@AlexandrLukovnikov 同一台服务器对吗？通常范围在 2KB 左右。而且我怀疑无论如何，如果他们在预检时没有令人满意的响应，他们就会中止（这又是一个浏览器错误）
你能得到这个错误的链接吗？
不，我不确定它是否已被报告，但这显然是一个错误，因为它应该可以工作但没有。 Ps：jsfiddle.net/n6usLq25 经过一番小研究，Here for iOS 他们说服务器必须接受范围请求。这违反了规范，因此仍然有资格作为错误 IMM，即使已被接受。
我可以在服务器响应中设置“Transfer-Encoding: chunked”吗？

【解决方案2】：

为您未来的搜索者提供另一种可能的解决方案：（如果您的问题不是 mimetype 问题。）

由于某些原因，除非我设置了 controls="true" 标志，否则视频无法在 iPad 上播放。

示例：这适用于我的 iPhone，但不适用于 iPad。

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

【讨论】：

【解决方案3】：

如果您还没有解决问题，请转到您的手机设置，然后选择 safari 并点击清除历史记录和网站数据，这对我有用，问题不在于代码，而在于 safari 本身。

【讨论】：