HTML5 video in Safari not working

Question

In our Java EE application we use the HTML5 <video> tags for playing MP4 videos. We use JBoss 7 as the application server. Videos are retrieved via Struts2 action like this : www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx

where zbRdTKQKLWnA2ZiY61Gx is a name of video on the server.

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>

...

It works fine in Chrome and Firefox, but not in Safari on Mac.

In Safari when I open the page containing a <video> tag, "Loading" is displayed but it doesn't load the video.

Here comes the really weird thing.

If paste the link to a video directly in the browser, it plays correctly. Then if I reload the page with the said video, it plays fine.

The same thing happens with all videos in the application.

What is happening ? Why are the videos not playing at first?

---

Dev tools in Safari :

When I initially load the page I get the following result :

All warnings are for CSS.

For opening the file directly in browser for the first time I get :

The error is "Failed to load resource: load handled by the module" :

When I reload the page I get the same response, but now I can play the video :

I think the problem goes from range headers. Actually I use this one :

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

Answer 1

Safari has a problem where if the video resource requested does not specifically have the extension .mp4, even if the mime type is correctly set. I could replicate your problem - if the video resource was just a string identifier (without .mp4), Safari would display a preview for the video but it wouldn't actually play. When the resource was renamed to filename.mp4, Safari started playing the video as expected. Chrome worked fine either way.

If you change your namespace.action.GestionDocumentAction class so that when the second parameter ends in .mp4 it strips off the extension to find the correctly-named local resource, it should be able to return the video with the URL ending in .mp4 as Safari expects - www.myproject.com/namespace/documents/3/zbRdTKQKLWnA2ZiY61Gx.mp4.