为啥 Safari 不能播放 <video> 中没有扩展名的文件？

Posted 2023-02-19

【中文标题】为啥 Safari 不能播放 <video> 中没有扩展名的文件？

【英文标题】：Why won't Safari play file without extension in <video>?为什么 Safari 不能播放 <video> 中没有扩展名的文件？

【发布时间】：2015-07-23 19:43:59

【问题描述】：

我有一个名为 52bbb58c 的文件，没有文件扩展名，它是 mp4 视频。

当我尝试将其作为 &<source> 添加到具有属性类型 (video/mp4) 的 <video> 时，它不会播放。

这适用于 Chrome 和 Firefox。如何为 Safari 修复它？

【参考方案1】：

Safari 在播放视频和音频等流媒体时非常挑剔。它有以下要求

托管媒体的服务器/应用程序必须支持字节范围。 Safari 将尝试下载 2 个字节以确定媒体长度，然后根据文件大小将媒体下载为一个或多个块。如果只是将所有数据发送给它，它不会很好玩。 从媒体服务器返回的内容范围必须包含一个表示总媒体大小的数字，而不仅仅是“*”。 媒体 URL 必须有一个与媒体类型匹配的后缀。这就像 IE 重头来过一样：正确设置 mime 类型是徒劳的，因为 Safari 不会遵守这里的规则，它会忽略 mime 类型。

请注意，如果播放失败，Safari 不会告诉您问题是什么，只会引发媒体错误，没有更多信息。

对于 mpeg 4 视频/h.264，后缀 .mp4 有效 对于 mpeg 4 音频/aac，后缀 .aac 有效

如果您是 Safari 开发人员，请考虑修复这些问题。

这是在 Safari 11.1.2 上测试的

【参考方案2】：

在其他地方详细查看了这个问题之后（请参阅下面的链接），我认为最可能的原因是 Chrome 和 IE 假定 html 中的“type=video/mp4”信息是正确的，因此会解释返回的内容以这种方式从服务器获取，而 Safari 会查看响应中的内容类型来做出决定。

换句话说，Chrome 将返回的文件作为视频播放，即使来自服务器的 HTTP 响应的标头是“Content-Type:application/octet-stream”而不是“Content-Type:video/mp4”。

您可以通过查看示例的响应标头并查看内容类型是否设置为“application/octet-stream”而不是“video/mp4”来检查这一点。

相关回答：https://***.com/a/32967365/334402

【讨论】：

我的视频 API 内容类型已经是 video/mp4 但视频无法在 Safari/MacOs 中播放。

@SibeeshVenu - 看看大卫最近的回答。它有更多最新信息和更多细节，可能会对您有所帮助。如果不是，那么最好打开一个问题，如果可能的话，包括一个指向无法播放的示例视频的链接。

【参考方案3】：

我也遇到过类似的问题。就我而言，它在 Chrome 和 Firefox 上运行良好，或者当我为文件添加扩展名时。如果我正确更改了 mime 类型，它仍然无法通过。

实际上我有一个我们部署的服务器返回响应头，如下所示。

HTTP/1.1 206 Partial Content
Date: Mon, 05 Mar 2018 08:33:49 GMT
Server: gunicorn/19.7.1
X-Powered-By: Express
content-type: video/mp4
accept-ranges: bytes
content-length: 2
content-range: bytes 0-1/37475549
Cache-Control: public, max-age=0
Connection: keep-alive

响应头本身当然是正确的。

但是，我们的服务器实际返回的大小与content-length 和content-range 之间存在差异。所以到目前为止，它运行良好，因为我修复了它。如果你和我的情况一样，这个bug会用curl --range 0-1 <target URL>复现。

它会这样说error 18: transfer closed with outstanding read data remaining

所以答案是正确确认服务器返回的值。

参考

curl error 18 - transfer closed with outstanding read data remaining

Does iPhone/iPad Safari require 'Accept-Ranges' header for video?

https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6

https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

https://github.com/WebKit/webkit/blob/5277f6fb92b0c03958265d24a7692142f7bdeaf8/LayoutTests/imported/w3c/web-platform-tests/fetch/http-cache/partial.html

https://github.com/w3c/web-platform-tests/blob/master/fetch/http-cache/partial.html

【参考方案4】：

实际上，Safari 浏览器并不支持所有 MP4 格式的视频。

MP4 只是一种文件格式，不是视频编解码器类型。

您可以使用 ffmpeg 获取视频的信息。

对我来说，我发现 Safari 可以播放以下视频编解码器的 MP4 视频：

ffmpeg -i demo3.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'demo3.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
    description     : Codec by Bilibili XCode Worker v4.7.18(fixed_gap:False)
  Duration: 00:00:54.44, start: 0.000000, bitrate: 772 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 852x480 [SAR 640:639 DAR 16:9], 635 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
    Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 128 kb/s (default)
    Metadata:
      handler_name    : SoundHandler
At least one output file must be specified

你应该注意到关键字 Video: h264(High)。 并且视频无法在 Safari 上播放：

ffmpeg -i demo3_mask.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'demo3_mask.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
  Duration: 00:00:54.33, start: 0.000000, bitrate: 630 kb/s
    Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuvj444p(pc), 852x480, 627 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler

关键字是Video: h264(High 4:4:4 Predictive)。编解码器类型可以参考wiki或here。

如果这是您的情况，您可以使用以下命令使用 ffmpeg 转换视频编解码器类型：

ffmpeg -i demo3_mask.mp4 -vf "scale=2*trunc(iw/2):-2,setsar=1" -profile:v high -pix_fmt yuv420p out2.mp4

您可以查看新视频的信息：

ffmpeg -i out2.mp4 -hide_banner
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'out2.mp4':
  Metadata:
    major_brand     : isom
    minor_version   : 512
    compatible_brands: isomiso2avc1mp41
    encoder         : Lavf58.20.100
  Duration: 00:00:54.33, start: 0.000000, bitrate: 221 kb/s
    Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p, 852x480 [SAR 1:1 DAR 71:40], 218 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
    Metadata:
      handler_name    : VideoHandler
At least one output file must be specified

希望对您有所帮助。