Safari 中的 HTML5 视频无法正常工作

2022-09-03 07:45:39

在我们的Java EE应用程序中,我们使用HTML5标签来播放MP4视频。我们使用 JBoss 7 作为应用程序服务器。视频通过Struts2操作检索,如下所示:<video>www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx

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

支柱.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 中的开发工具:

当我最初加载页面时,我得到以下结果:enter image description here

所有警告都针对 CSS。

为了第一次直接在浏览器中打开文件,我得到:enter image description here

错误是“无法加载资源:加载由模块处理”:enter image description here

当我重新加载页面时,我得到了相同的响应,但现在我可以播放视频:enter image description here

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

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);

答案 1

Safari 浏览器存在一个问题,即如果请求的视频资源没有专门具有扩展.mp4,即使正确设置了哑剧类型也是如此。我可以复制您的问题 - 如果视频资源只是一个字符串标识符(没有),Safari将显示视频的预览,但实际上它不会播放。当资源重命名为 时,Safari 浏览器开始按预期播放视频。Chrome 无论哪种方式都运行良好。.mp4filename.mp4

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


答案 2