Question

以下代码在Mozilla＆amp;铬。但在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>

我为视频代码尝试了preload，如果我添加controls，我应该点击“播放”按钮。我不需要任何视频控件，所以我删除了控件。

Answer 1

Safari已启动（去年），默认情况下会阻止带有音轨的视频自动播放。就我所知，他们从未专门公开过这个，但我相信这是以下变化的一部分：

Safari 11还允许用户通过打开Safari的新“网站”偏好设置面板，控制哪些网站可以自动播放视频和音频

（Source）

唯一真正的解决方法是从视频中删除音频轨道，或者默认情况下将其静音。

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

如果您的服务器可以检测到请求者的浏览器，您可以将其应用于Safari，而将其他浏览器保留为以前的状态。

Answer 2

如果该视频无法在Safari中运行，但可以在其他浏览器（Chrome，Firefox，Edge）中运行，则可能是与字节范围请求有关的问题。

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

要修复服务器配置，请take a look at Apple's recommendations。如果需要快速修复，可以将视频移到具有正确配置的其他托管服务器（并确保更新所有视频源引用）。

Answer 3

我也遇到了类似的问题，即视频无法在Safari上播放。问题是我的网络服务器。我将视频移到了另一台托管服务器上，然后从那里加载了它，并且可以正常工作。

例如

代替：

println(Helper.changeDateFormat(dateString: "2017-09-20", fromFormat: "yyyy-MM-dd", toFormat: "yyyy/MM/dd"))

做这样的事情：

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

Answer 4

就我而言，我与service-worker一起使用的是Angular，而Safari无法加载mp4文件。

服务工作者中断Byte-range请求，因为它就像野生动物园和服务器之间的中间人，在此过程中，SW将http响应代码从206更改为200，这样Safari不会下载mp4

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

Answer 5

添加了一个属性＆＃34;静音＆＃34;

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

在Chrome中我已经完成了所有工作，Safari也在尝试

HTML视频无法在Safari浏览器中播放

5 个答案: