logo标签列表

<video>在其他浏览器中可以播放，但在Safari中无法播放。

htmlvideosafarimp4
40
我们网站上有一个MP4视频，在IE9+、Firefox、Chrome和Mac上的Chrome中播放得很好。然而，在Safari上，视频根本无法播放-它会触发“停滞”事件，然后什么也不加载。我可以发布我们的HTML，但我通过发现即使导航到原始MP4的URL时，Safari也无法播放来进一步跟踪问题。当在本地下载并播放时，视频在Quicktime中运行正常。
最奇怪的是，所有开发人员中，只有我可以在我的开发计算机上运行相关服务器时使视频在Safari上正常工作。更重要的是，同一目录中的其他MP4文件存在类似的问题。这对我来说是关键，我一直在搜索视频从服务器传输的任何细微差别-请求/响应标头、确切的文件大小等等。
从Chrome复制的标头（只因为从Safari复制/粘贴较困难）。
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:*************:8443
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Response Headers
Accept-Ranges:bytes
Content-Length:44875102
Content-Type:video/mp4;charset=UTF-8
Date:Tue, 30 Dec 2014 21:11:51 GMT
ETag:W/"44875102-1419959755000"
Last-Modified:Tue, 30 Dec 2014 17:15:55 GMT
Server:Apache-Coyote/1.1

（另外，如果这让你想起了旧问题；我知道Windows上的Safari已经死了很久。这个问题发生在OS X上）

编辑：新的信息可能会有所帮助。我从自己的Web服务器上拍摄了一个个人视频，在有问题的Safari浏览器上可以正常工作，并将其下载到我们服务器的本地视频目录中。然后，它遇到了和我们其他视频相同的问题。这使我认为，MP4本身可能并不重要 - 这可能是我们Tomcat 7 Web服务器的某种服务器问题。我们确实已正确注册Content-Types，至少涵盖了基础知识，但我很好奇是否还有其他必要的部分。

更多信息：我一开始没想到提到这一点，但我们正在通过HTTPS连接加载我们的网页和视频。我们的大多数测试服务器没有有效证书，因此我们需要单击标准浏览器警告“此服务器可能不是它所说的那样”的选项。我们现在正在研究在所有服务器上获得正确证书所需的步骤。

你能提供一个视频链接，展示这个问题出现的情况吗？ - Alexander O'Mara
@AlexanderO'Mara 抱歉，不行；这是正在开发中的产品的一部分。我可以提供一个小的示例fiddle，但很可能头文件是相关的，当然，在默认配置的Apache服务器上正确编码的视频的基本示例可以正常工作。 - Katana314
我尝试配置我的本地服务器以使用类似的标头来提供视频，但仍无法复制它。除非我们能够获得一个示例视频，否则我不确定我们能做些什么，只能猜测。 - Alexander O'Mara
@AlexanderO'Mara 很不幸，这是真的。在一些fiddle中，我很难传递所有因素，比如典型的JS问题。我认为所涉及的MP4文件并不是问题的因素（我可能会重新测试这个想法，但我记得在其他视频文件中发现了类似的问题）。否则，可能与某些标头、服务器对特殊HTTP操作的支持或Safari的小修订等有关。 - Katana314
2
注意：自我发布这个问题以来，发现Safari可能在页面上使用自签名证书播放视频时存在问题。在Safari中，您可以展开证书的详细信息，并告诉它永久接受自签名证书，这可能会使视频正常工作。此外，“stalled”事件可能会触发，即使只是从远程连接的服务器检索数据需要很长时间。这可能有助于您，也可能没有帮助。 - Katana314
几年后，我也来发表一下意见——我遇到了这个问题。我有一个托管在Netlify上的静态站点播放视频。它在所有地方都能正常工作，但突然间桌面/移动版Safari无法播放MP4文件。我确认了Netlify的CDN是个问题，因为现在内容已经在S3后面的CloudFront中，而且在Safari中没有任何问题。 - Stephen Tetreault
13个回答
48
1
这是真的。这也意味着您必须添加额外的层（例如Varnish或Nginx），或者完全重新实现应用程序代码以处理动态生成或转换的内容的范围处理。 - Austin Burk
3
iOS支持大于2GB的电影文件，但因为这个奇怪的要求，它播放50KB的GIF视频时会出现问题。 - OdraEncoded
3

我曾经遇到了一个音频相关的类似问题。解决方式是在音频标签中添加source标签。你可以尝试以下方法：

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

4
这里没有涉及到音频标签吗？ - Felix Haeberle
他提到：“你能否在你的情况下尝试以下方法：” - Kalnode
2

我上传了一个新的MP4文件，但只在Safari浏览器上（在我的MAC和iPhone上）播放，而在Chrome、Oasis、Firefox或Brave上无法播放。HTML代码与之前成功的相同。文件大小和尺寸也没问题。但是旧的工作文件上的编解码器是“H.264，AAC”，而新的不工作的文件上的编解码器是“MPEG-4，AAC”。我使用VideoPad编辑我的视频文件。所以我查看了“导出文件为”选项中的规格选择，并且发现编解码器默认为MPEG-4。我选择了H.264并导出了文件。上传到AWS并公开发布。在四个无法播放的浏览器中重新尝试我的新文件，BINGO！它们都可以播放。真是太好了！

所以解决方案基本上是选择H.264而不是MPEG-4编解码器？ - Felix Haeberle
1

确保在您的HTML代码中提供了controls='true' type='video/mp4'。

<video loop controls='true' width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
2
嗯...据我所知，'controls'是一个布尔属性，意味着它不需要='true'，而且我所知道的资源中没有任何提到video标签上有'type=etc'属性的。虽然我从未给出过我的HTML本身，但基本上我将其定义得与你的非常相似，只是在视频内部使用了source元素来定义src / type。 - Katana314
@Katana314，大多数情况下我同意你的看法，但这个不是。 - John Hua
1
@huazihihao 你同意什么？ - Katana314
结论是什么？有人成功实现了吗？ - nelsonic
"type="*"是陷阱。 - Gaurav Sharma
有人发现这个答案有帮助吗？ - Sibeesh Venu
1

我遇到了同样的问题。所有的头部、范围等都是正确的。然而，我的服务工作者构造得很差。所有其他浏览器都能处理失败，但Safari不能。暂时移除服务工作者，一切恢复正常。

1

这可能是缺少字节范围支持的问题，取决于您使用的版本。它已经添加到DMSDownloadServlet中MAGNOLIA-3855（Magnolia修复版本4.4.6）。

0

如果你将这些添加到你的.htaccess文件中会发生什么？

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
这不是Apache服务器，因此不是htaccess。但是它确实通过其他配置文件具有MIME类型。 - Katana314
如果您将生成的HTML保存为html文件，并在修复任何损坏的URL后将其加载到Safari中，它是否有效？ - designosis
不行，即使视频网址直接在浏览器中加载也不起作用。 - Katana314
1
Safari 在流媒体 MIME 类型方面表现很差。它会忽略 MIME 类型而仅查看文件扩展名。正确设置 MIME 类型可以使其他浏览器表现良好，但对 Safari 没有用。 - David
Safari 真的很糟糕，就这样。它真的是新版 IE。 - geedubb
0

如果您已经解决了这个问题，请原谅我！ 我在Safari中遇到了与服务器视频相同的问题。我使用POSTMAN/INSOMNIA检查了我的服务器发送的标头，成功解决了这个问题。Chrome可能会欺骗您，因为在这个浏览器中视频可以正常播放！

如果视频没有范围（完整视频请求），您的服务器必须返回状态（200），并检查您的服务器是否发送了“Accept-Ranges:bytes”。 标头示例状态200：

Server: nginx
Date: Wed, 25 Jul 2018 17:34:18 GMT
Content-Type: video/mp4
Content-Length: 22995782
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes

如果视频被分段，您的服务器必须正确返回带有范围头的状态（206）。 206状态的头部示例：

Server: nginx
Date: Wed, 25 Jul 2018 18:13:07 GMT
Content-Type: video/mp4
Content-Length: 1023
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes
Content-Range: bytes 1-1023/22995782

希望这能帮到你！最好的祝福，Paulo Durço

1
我的服务器可以做到这一点。但在Safari上仍无法播放。 - chovy
0

...

顺便问一下，charset 在 video/mp4 类型上有任何意义吗？尝试将其删除。

编辑：是的，charset 可能是问题所在，请参见：指定在 Magnolia 中上传的文档的内容类型

编辑2：不是 charset，糟糕，阅读理解失败。可能是字节范围？ 引用一下：“[...] 我们发现 Safari/iOS“使用 HTTP 字节范围请求音频和视频文件。” 现在我们猜测 Magnolia DMS 文件服务不支持此功能，因此流媒体失败。”

真正让人烦恼的是，我想要一种简单的确认方式，但在Safari的开发者工具中，当我点击MP4文件的网络请求时，它错误地声称没有请求或响应头。也许我会找到另一种验证的方法。 - Katana314
有没有测试链接的机会？如果需要，请私信我（Twitter = @nexii）。 - Nexii Malthus
0
在我的情况下，我需要从track标签中删除默认属性：
<track default kind='captions' />

如果有其他人遇到了这个问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接