Safari 9.0 can not play mp4 video on the storage s

Question

The following video link cannot be played with safari 9.0 (latest version). But older versions of safari, chrome and firefox can play.

http://assets00.grou.ps/0F2E3C/wysiwyg_files/Videos/saksuka/20150928104628-lhmkkfbhnkiisbhht.mp4

I can play with safari 9.0 when i download the video from the server to my computer.

That's why I don't think this problem stems video encoding.

I have done these settings;

mime.types
video/mp4   mp4 m4v
video/ogg   ogv
video/webm  webm

httpd.conf
AddType video/mp4 mp4 m4v
AddType video/ogg ogv
AddType video/webm webm

.htaccess
AddType video/mp4 mp4 m4v
AddType video/ogg ogv
AddType video/webm webm

Answer 1

This seems to be recurring problem with some mp4 files on Safari.

I tested your video on a localhost node.js static server and it played fine in Safari, which means the video itself should be fine.

If you look at the web inspector in Safari you will see that the web request is not including some headers. This causes some servers problems and they do not respond the way Safari is expecting, or do not respond at all.

You can see similar problems being discussed (the second one is not your case I think but illustrates that the info included in the request sent to the server can cause the server to 'decide' not to respond as you want):

• Failed to Load Resource, Plugin Handled Load on iOS
• "Plugin handled load" dialog appears when playing a video within a web page within UIWebView

Update:

Using wireshark to capture the request from Chrome, it can be seen to result in a response from the server with the video to be played while the request from Safari (on the same machine) results in no response from the server.

The requests are generally similar and both do include the referrer header. The Safari browser is only asking for the first 2 bytes to be returned from the server initially - it does this by using the 'range' header, which is used to specify the bytes range that a file returns:

• Range: bytes=0-1\r\n

Chrome on the other hand requests the entire video in its range request:

• Range: bytes=0-\r\n

However, using a HTTP tool (e.g. Postman) on Chrome and changing the range to 0-1 does not seem to stop the server responding in the Chrome case. In fact using the tool to set, as far as possible, all the same headers as Safari sets seems still seems to return the video ok.

Answer 2

To shed some more light on mp4s not playing in the video tag, I'd like to share my experience here. I spent a good while troubleshooting an issue recently that was preventing mp4s from playing in Safari.

As mentioned in one of the previous answers, Safari first sends a byte range request for a Video tag that expects a 206 response. However, if you use a Service worker, the response returns with a 200 and it appears Safari doesn't know how to handle this. Our solution was to exclude using a Service Worker for Safari.

We found this by using the network tab of the Safari debugger on a MacBook to troubleshoot the issue we were seeing on the iPad. Attached is a screenshot for comparison/reference. The left tab shows what the call should look like by default. The right tab shows what you would see if using a Service Worker.

Answer 3

The issue is that safari or iOs expects chunks. Meaning from a streaming server. If your video is from a blob or file server then safari will throw an error. You can relate it to this post Failed to Load Resource, Plugin Handled Load on iOS