html - HTML5 video problems on Safari

Question

I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.

<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>

Get fom VLC codec informations:

video h.264/mpeg-4 avc

audio mpeg aac audio mp4a

Answer 1

This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.

You could workaround that issue by either

• Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
• On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
• On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...

_{*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.}