HTML视频未在Safari浏览器中播放

下面的代码在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>

我已经尝试了视频标签的

预加载

，如果我添加

控件

我应该点击播放按钮。我不需要为视频设置任何控件，因此我已删除了控件。

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

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

（）

唯一真正的解决办法是从视频中删除音频曲目，或者在默认情况下将其静音

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

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

添加了一个属性“mute”

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

---

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

我也遇到了类似的问题，视频没有在Safari上播放。问题出在我的web服务器上。我将视频移动到另一个托管服务器，从那里加载，然后它就工作了

e、 g

而不是：

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

这样做：

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

---

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

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

---

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

在我的情况下，我使用的是angular with service worker，Safari没有加载mp4文件

服务人员打破字节范围请求，因为它就像Safari和服务器之间的中间人一样，在这个过程中，SW将HTTP响应代码从206更改为200，这样Safari就不下载MP4。

---

为了解决这个问题，当我需要显示mp4视频时，我绕过了服务人员，使用angular 8很简单，只需在mp4 url和works中添加ngsw bypass=true作为查询字符串。（）

您的问题可能与有关根据所提到的@Mahuna帖子，您应该添加

playsinline

属性。不清楚您的答案是什么。您在哪里添加了此属性？“Safari也在尝试”是什么意思？谢谢你，先生。我花了半天的时间试图解决这个问题，最终在iOS Safari上成功了。事实证明，这个问题仍然存在（参见GitHub，Stackoverflow，…），但还没有人提出这种解决方法。