Safari中的HTML5视频无法播放

Question

在我们的Java EE应用程序中，我们使用HTML5 <video>标记播放MP4视频。 我们使用JBoss 7作为应用服务器。视频是通过Struts2操作检索的，例如：www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx

其中zbRdTKQKLWnA2ZiY61Gx是服务器上视频的名称。

struts.xml：

...

<action name="documents/*/*" class="namespace.action.GestionDocumentAction" method="obtain">
    <param name="typeId">{1}</param>
    <param name="identifiantDocument">{2}</param>
    <result name="success" type="stream">
        <param name="contentType">video/mp4</param>
        <param name="inputName">flux</param>
        <param name="allowCaching">true</param>
        <param name="contentDisposition">inline;filename=${filename}</param>
    </result>
</action>

...

在Chrome和Firefox中它运行良好，但在Mac的Safari中不起作用。

在Safari中，当我打开包含<video>标签的页面时，会显示“正在加载”，但不会加载视频。

这里出现了真正奇怪的事情。

如果直接在浏览器中粘贴视频链接，则可以正确播放。然后，如果我重新加载带有该视频的页面，它会正常播放。

应用程序中的所有视频都会发生同样的情况。

发生了什么？为什么视频一开始不能播放？

---

Safari中的开发工具：

当我最初加载页面时，我得到以下结果：

所有警告都与CSS有关。

第一次在浏览器中打开文件时，我得到以下结果：

错误是“Failed to load resource: load handled by the module”：

当我重新加载页面时，我得到相同的响应，但现在我可以播放视频：

我认为问题出在范围头文件上。实际上，我使用的是这个：

this.getServletResponse().setHeader("Accept-Ranges", "bytes");
this.getServletResponse().setHeader("Content-Type", "video/mp4");
this.getServletResponse().setHeader("Content-Length", "383631");      // 383631 - just for exemple, I use a real size
this.getServletResponse().setHeader("Content-Range", "bytes 0-383630/383631"); // 0-383630/383631 - the same
this.getServletResponse().setStatus(206);

- illusion

---

嗨@illusion，你在使用https吗？ - Pablo Recalde

你能在Fiddle上用Safari重现这个问题吗？还是它只出现在你的环境(服务器)中？ - Szabolcs Páll

@SzabolcsPáll，这是针对我们的环境特定的，我们使用Struts2。我已经更新了问题。 - illusion

似乎是MIME类型问题，但也有可能是流的问题（这就解释了为什么缓存后能正常播放），但如果没有测试环境很难确定。 - Szabolcs Páll

可能还有其他问题。这里是另一个解决同样问题的答案列表 - 至少对于iOS Safari来说，其中一个主要的问题是您的应用程序是否支持字节范围请求。这里是一个展示此实现的GitHub代码片段。 - Aaron D

Answer 1

Safari存在一个问题，即如果请求的视频资源没有明确的.mp4扩展名，即使mime类型已正确设置，也会出现问题。我能够再现您的问题 - 如果视频资源仅是一个字符串标识符（没有.mp4），Safari将显示视频预览，但实际上不会播放。当资源重命名为filename.mp4时，Safari开始按预期播放视频。Chrome可以正常工作。

如果您更改namespace.action.GestionDocumentAction类，使第二个参数以.mp4结尾时，它会剥离扩展名以查找正确命名的本地资源，并能够像Safari期望的那样返回URL以.mp4结尾的视频 - www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx.mp4。

- Aaron D

---

没有解决问题，但作为唯一（不错的）答案，你应该得到赏金。 - realUser404

对我来说，这实际上解决了问题。我无法在Safari上运行视频，但添加 .mp4 解决了它。也许是因为我正在使用Spring Boot，我不知道。 - tiagocarvalho92