Fragmented mp4 cannot be played on pure html5 video

Question

I need to use a video tag to serve over 3GB of video on the web. When the page is loaded, it takes a long time for the media element to receive the 'loadedmetadata event' .

I've found that the size of the moov box is too large (33MB) . So when I re-encoded it with the 'empty_moov + frag_keyframe' option of 'ffmpeg' , but it also took longer to fetch all fragmented information from the 'Inspector - Network' tab in Chrome.

Is there a way to speed up loading when playing 'fragmented mp4' with html5 video tag?

Answer 1

You don't mention what protocol you are using to the deliver the video to the browser, but fragmented MP4 is usually delivered with an ABR (Adaptive Bit Rate) streaming protocol. The most commonly used ABR protocols at the time of writing are probably HLS and DASH.

Using ABR allows the client start at a lower bit rate and hence speed up initial playback - it can then step up through different quality levels to reach the optimal quality for the particular device and the current network conditions.

You can see this effect with large streaming services where the video quality will be noticeably lower at start up and then improve after 10-20 seconds. See more more info in this answer:

• https://stackoverflow.com/a/42365034/334402

Bowsers generally don't support ABR natively with the HTML5 tag - for this reason you generally will use a Javascript based player which uses the HTML5 MSE (Media Source Extensions) mechanism to support ABR. You can see open source exmamples such as:

• http://dashif.org/reference/players/javascript/1.3.0/samples/dash-if-reference-player/index.html
• https://shaka-player-demo.appspot.com/demo/#asset=//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd;lang=en-US