Safari - Videos Load Far Too Slowly

MediaSource API - Safari pauses video on buffer underflow

I've found the answer, which is to explicitly set the duration to +Inf on the MediaSource object once it has been opened:

mediaSource.addEventListener('sourceopen', () => {
    mediaSource.duration = Number.POSITIVE_INFINITY;
});

Best HTML5 Video Format for Safari on Window (or getting VP8 to play in Safari on Windows)

Update...
Ogg Theora can be played in Quicktime with XiphQT, but I've ran into many issues when trying to playback various Ogg video formats.

With h.264, if you are using x264 (eg: Handbrake) to transcode/encode video, the following can be set in advanced mode:

cabac=0:ref=1:me=umh:bframes=0:weightp=0:8x8dct=0:trellis=0:subq=6:tune=fastdecode

These parameters:

• ref=1, set the reference frame limit to 1, using more reference frames requires more processing.
• bframes=0, disables b-frames, not sure on this but I believe that forces P-frame which are faster
• cabac=0, disables CABAC compression, which would make the output smaller but take more processing
• tune=fastdecode, set's the tune preset to optimize the output specifically for decoding

The other options I am not as sure of and have yet to find solid evidence on their impact towards decoding, let alone if they have any impact on decoding. For example, the "me" setting is for subpixel strength in the transcoding process, it has an effect on video quality, but understanding how frames change, it could have an impact (in some videos) on the decoding process. That is something I do not know, but am stating for a better understanding of where I am coming from.

More about these settings can be found here:

http://mewiki.project357.com/wiki/X264_Settings

HTML5 video problems on Safari

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.}

---

Related Topics