Safari 中的 HTML5 视频不起作用

Posted 2023-05-07

【中文标题】Safari 中的 HTML5 视频不起作用

【英文标题】：HTML5 video in Safari not working

【发布时间】：2015-10-19 03:25:25

【问题描述】：

在我们的 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> 标记的页面时，会显示“正在加载”，但不会加载视频。

真正奇怪的事情来了。

如果将链接粘贴到视频直接在浏览器中，它会正确播放。 然后，如果我用所述视频重新加载页面，它会播放 fine。

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

发生了什么？为什么视频一开始没有播放？

---

Safari 中的开发工具：

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

所有警告均针对 CSS。

第一次直接在浏览器中打开文件：

错误是“加载资源失败：模块处理加载”：

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

我认为问题出在范围标题上。 其实我用这个：

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 你在用https吗？

嗨@r1verside！不，我们使用 http。

你能用 safari 来重现这个吗？还是特定于您的环境（服务器）？

@SzabolcsPáll，它特定于我们的环境，我们使用 Struts2。我已经更新了问题。

对我来说似乎是一个 mime 类型的问题，但也可能是流的问题（这可以解释为什么缓存后它播放得很好），但是如果没有测试环境就很难说.

【参考方案1】：

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

如果您更改 namespace.action.GestionDocumentAction 类，以便当第二个参数以 .mp4 结尾时，它会剥离扩展名以找到正确命名的本地资源，它应该能够返回 URL 以 . Safari 所期望的 mp4 - www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx.mp4。

【讨论】：

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

对我来说，这实际上解决了这个问题。我无法在 safari 上运行视频，但附加 .mp4 解决了它。也许是因为我正在使用我不知道的spring boot。