Question

我的文件名为52bbb58c，没有文件扩展名，而且是mp4视频。

当我尝试将&<source>添加到具有属性类型（video / mp4）的<video>时，它无法播放。

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

Answer 1

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

换句话说，Chrome会将返回的文件作为视频播放，即使来自服务器的HTTP响应有一个标题为“Content-Type：application / octet-stream＆＃39;而不是＆＃39;内容类型：视频/ mp4＆＃39;。

您可以通过查看示例的响应标头并查看内容类型是否设置为＆＃39; application / octet-stream＆＃39;来检查此问题。而不是＆＃39;视频/ mp4＆＃39;。

相关答案：https://stackoverflow.com/a/32967365/334402

Answer 2

在播放流媒体（例如视频和音频）时，Safari非常挑剔。它具有以下要求

托管媒体的服务器/应用程序必须支持字节范围。 Safari将尝试2字节的下载，以确定媒体的长度，然后根据文件的大小，以一个或多个块的形式下载媒体。如果仅发送所有数据，它将无法正常工作。
从媒体服务器返回的内容范围必须包括媒体总大小的数字，而不仅仅是“ *”。
媒体URL必须具有与媒体类型匹配的后缀。就像IE浏览器一样：正确设置mime类型是徒劳的，因为Safari不会遵循此处的规则，并且它将忽略mime类型。

请注意，如果Safari播放失败，它不会告诉您问题出在哪里，只是出现了媒体错误，没有更多信息。

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

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

这已在Safari 11.1.2上进行了测试

Answer 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之间存在差异。到目前为止，它运作良好，因为我修复了它。如果您处于我的相同情况，则会使用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

Answer 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

希望获得帮助。

为什么Safari不会在<video>中播放没有扩展名的文件？

4 个答案:

参考