HLS. JS: past, present and future

source ：Global Video Tech Meetup：Seattle Speaker ：Rob Walch Content arrangement ： Yin Wenpei The speaker introduced HLS.js What is it? , as well as HLS.js How to develop and improve in the past one to two years .

Catalog

• summary
• What is? HLS.js？
  • Create a HLS Manifest
• What is? MSE？
• some HLS.js Other definitions of
• HLS.js The history of
• HLSv1.0
• Add... To your stream HLS
  • Generate video segment
  • Provide incremental playlist updates
  • Prevent playlist overloading
  • Preload prompts and block media downloads
  • Provide a copy of the report

summary

HLS.js It is developed by apple , Play in browser HLS Video player . In the recent , Apple released Safari Low latency in browsers HLS(LL-HLS), At the same time, it is implemented in other browsers based on HLS.js Player .

stay 2015 year ,HLS Project by Guillaume du Pontavice establish .js Use media source extensions (Media Source Extensions) To support Html Media element Play from javascript Media streaming .

What is? HLS.js？

HLS —— HTTP Live Streaming

Hls.js It's a JavaScript library , Support to play in the browser HLS, Support MSE(Media Source Extensions).(https://github.com/video-dev/hls.js/)

It works by putting MPEG-2 Transport stream and AAC/MP3 Stream to ISO BMFF（MP4） fragment . When the video stream is downloaded and buffered by the browser , Use Web Worker Perform the transformation asynchronously .

Create a HLS Manifest

Multiple playlist files are provided to provide different encodings of the same content .

The main playlist describes all available quality levels for your content . Each quality level is a specific bit rate video stream , And included in a separate playlist . The client switches to the most appropriate quality level according to the real-time and future network throughput . In this way, the client player can minimize the stagnation of playback , Provide users with the best viewing experience .

The main playlist will not be reread . Once the client reads the main playlist , It assumes that all quality levels of the video stream will not change . Once the client sees it on one of the separate quality level playlists ext-x-endlist Mark , Then the flow ends .

chart 1 establish HLS Manifest

The specific implementation is visible https://developer.apple.com/documentation/http_live_streaming/example_playlists_for_http_live_streaming/creating_a_master_playlist

What is? MSE？

MSE Its full name is Media Source Extensions.

This specification extends HTML Media Element [HTML] allow JavaScript Generate a media stream for playback . allow JavaScript The generated flow supports various use cases , Such as adaptive streaming and time shifted live streaming .

This specification allows JavaScript by audio and video Dynamically construct media streams . It defines a MediaSource object , This object can be used as HtmlMedia The media data source of the element .MediaSource Object has one or more SourceBuffer object . Applications attach data segments to SourceBuffer object , And the quality of additional data can be adjusted according to system performance and other factors . come from SourceBuffer Object as decoded and played audio 、 Track buffer for video and text data . The byte stream specifications used with these extensions are available in the byte stream format registry [MSE-registry] Find .

chart 2 MSE flow chart

some HLS.js Other definitions of

1. HLS.js Is playing in the browser HLS One of the many methods of ;
2. Apple chrome Safari Is the first to use HLS.js Browser ;
3. HLS.js Our goal is to support any HLS Flow and Safari;
4. HLS.js Be able to provide feedback to Apple Report errors and function requests .

HLS.js The history of

HLS.js By Guillaume du Pontavice On 2015 In Dailymotion Open source project created .

chart 3 Participate in HLS.js Statistical chart of developers

Participate in HLS.js The specific contributions of developers over the years can be seen —— https://github.com/video-dev/hls.js/graphs/contributors?from=2015-01-25&to=2021-04-26&type=c

When Guillaume Leave office and go to Netflix In office ,John Bartos On 2018 Took over in HLS.js.

after ,Bartos spec Put forward LHLS.js It should be used as a standard for low delay transport streams .

Until now we all know DASH-industry forming .

HLSv1.0

1. Releases · video-dev/hls.js (https://github.com/video-dev/hls.js/releases)
2. Projects · video-dev/hls.js (https://github.com/video-dev/hls.js/projects)
3. Get demo url from https://github.com/video-dev/hls.js/tree/deployments

Add... To your stream HLS

Back end production tools and content delivery systems must implement new rules , To achieve low delay streaming . Low latency HLS New features are available in the following areas ：

1. Generate video segment ;
2. Play list incremental update ;
3. Block list reload ;
4. Preload prompts and block media downloads ;
5. Transport stream report .

HLS The specification defines Pantos-HLS-RFC8216BIS Revised edition 7 And later versions of low latency extensions .

Generate video segment

Low latency HLS It provides a parallel channel for distributing media at the real-time edge of the media playlist , It divides the video into a large number of smaller files , Such as CMAF block . These smaller files are called HLS piecewise . Because the duration of each segment is short , Therefore, it can be packaged earlier than its parent segment 、 Publish and add to the media playlist . Although regular media segments may each be 6 second , However, some segments of the example may only be 200 millisecond . The first partial segment may only be sent after the previous segment 200 MS send , And then there was 29 Peer segments , Finally, there is a regular length 6 Second video segment , It contains its 30 Concatenation of segments of the same media . To reduce playlist bloat , Once some clips in the media playlist are removed from live edge In more than 3 Target duration , The server removes it from the media playlist .

You can use the new EXT-X-PART Tag to add some clips to the media playlist . You can place other video segment markers at the parent segment boundary （ Such as EXT-X-DISCONTINUITY）.

Provide incremental playlist updates

The client uses low latency HLS Update playlists more frequently . They can ask , The server can provide incremental playlist updates , Thus reducing transmission costs . These updates will use the new EXT-X-SKIP Mark to replace some information in the client's existing playlist .

Prevent playlist overloading

In order to make the client request for video segments more efficient , Low latency HLS Blocked playlist reload . When the client sends HTTP GET When requesting media playlist updates , It can add special query parameters called pass instructions , Incrementally update with the specified playlist . Then the server keeps the request （ block ）, Until the version of the playlist containing the clip is available . Prevent playlist reload , Can eliminate playlist polling .

Preload prompts and block media downloads

When delivering low latency streams globally , Eliminating unnecessary round trips is essential . The server uses a new tag EXT-X-PRELOAD-HINT Notify the client of the upcoming segment and the media initialization section . The client can send a message to the resource in advance GET request ; Once resources are available , The server will immediately respond to the request .

Provide a copy of the report

At low delay playback , The client must be able to switch renditions with a minimum number of round trips , To perform bit rate adaptation . To support this function , The server will add copy reports in other formats from the main playlist to each media playlist .EXT-X-RENDITION-REPORT The label contains the rendition report , And provide information such as the current last video sequence number in the media playlist of the rendition .

Attach speech video ：

http://mpvideo.qpic.cn/0bc3tyab2aaammahbmycsnrfbhwddwpaahia.f10002.mp4?dis_k=9e72c57039a4c6f083d8fe209fbea4c7&dis_t=1645153394&vid=wxv_2260463545899499527&format_id=10002&support_redirect=0&mmversion=false