Questions of HTML5 Videos
It’s months after last update. Recently, some questions of HTML5 videos apperars. This post is a simple list to introduce HTTP Range, HLS and MPEG-DASH.
HTTP Range header
The tag <video> is magical, MP4(or WebM) videos can be played directly with a simple url to it as <video> element’s src. But my first question is, what would happen if a video is very large? In fact, if you put a MP4 video on simple file server(localhost is ok, not file://) with a html file contains a video link to it, like this:
<!--
localhost/
|__index.html
|__video.mp4
-->
<video src="/video.mp4" type="video/mp4"></video>It’s good on Chrome and Firefox, however it not works on Safari absolutely! The answer is simple, Safari needs your server to support Range, see the following links to get more:
- https://stackoverflow.com/questions/27712778/video-plays-in-other-browsers-but-not-safari
- https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Range
Server tells browser size of the video, and browser take what it wants. Without this browsers must download all the video, when you clicking end of the seekbar.
HTTP Live Streaming (HLS)
One of many ordinary days, I found .m3u8 in a video site’s network requests. What’s that? It contains some plain text… like a list of video fragments’ urls? Wow, think I can download all of them and merge them into one video?
m3u8 is file format of HTTP Live Streaming:
HTTP Live Streaming (also known as HLS) is an HTTP-based adaptive bitrate streaming communications protocol implemented by Apple Inc. as part of its QuickTime, Safari, OS X, and iOS software. Client implementations are also available in Microsoft Edge, Firefox and some versions of Google Chrome. Support is widespread in streaming media servers.
P***Hub takes HLS, it loads master.m3u8 first, and the file contains urls of other m3u8 files, then video fragments are loaded.
PS: It’s easy to download a m3u8 video, in one sense, it’s a video file type, so you can use tools like ffmpeg to convert it into different types like MP4?
MediaSource
In fact, on desktop, HLS is supported by Edge and Safari only…some additional works are needed:
We know that, YouTube puts blob URL in <video>, and that url is not able to be used to download the video. So, what blob is that? Obviously, it’s not arrayBuffer, because it doesn’t contain all data of the video, and blob is immutable.
It’s MediaSource.
- https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
- https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API
Ok, another question, what data are pushed into that media source? Actually, P***hub does same works like this, they put their HLS video data into it. And, YouTube takes another protocol to make video streaming.
Dynamic Adaptive Streaming over HTTP (DASH)
The answer is, Dynamic Adaptive Streaming over HTTP (DASH), which looks has more great features than HLS. For this, Bilibili has an article to Introduce that why they choose DASH: https://www.bilibili.com/read/cv855111/
Dynamic Adaptive Streaming over HTTP (DASH), also known as MPEG-DASH, is an adaptive bitrate streaming technique that enables high quality streaming of media content over the Internet delivered from conventional HTTP web servers. Similar to Apple’s HTTP Live Streaming (HLS) solution, MPEG-DASH works by breaking the content into a sequence of small HTTP-based file segments, each segment containing a short interval of playback time of content that is potentially many hours in duration, such as a movie or the live broadcast of a sports event.
The content is made available at a variety of different bit rates, i.e., alternative segments encoded at different bit rates covering aligned short intervals of playback time. While the content is being played back by an MPEG-DASH client, the client uses a bit rate adaptation (ABR) algorithm to automatically select the segment with the highest bit rate possible that can be downloaded in time for playback without causing stalls or re-buffering events in the playback. The current MPEG-DASH reference client dash.js offers both buffer-based (BOLA) and hybrid (DYNAMIC) bit rate adaptation algorithms. Thus, an MPEG-DASH client can seamlessly adapt to changing network conditions and provide high quality playback with fewer stalls or re-buffering events.
https://en.wikipedia.org/wiki/Dynamic_Adaptive_Streaming_over_HTTP
There’s no browsers support DASH other than Microsft Edge, but caniuse.com said:
DASH can be used with a JavaScript library in browsers that doesn’t support it natively as long as they support Media Source Extensions.