Initial Exploration of HLS on-demand video & amp; live video, on-demand video

A Preliminary Study on HLS on-demand and live video streaming, on-demand video streaming

There are only two front-end live video protocols available:
 
 

  
  
RTMP (Real Time Messaging Protocol)
  
  
HLS (HTTP Live Streaming) WhereRTMPIt is a protocol developed by Adobe and cannot be compatible with the iPhone. Therefore, the HLS protocol is the most compatible currently.
 
 

HTTP Live Streaming (HLS) is an HTTP-based Streaming media transmission protocol implemented by Apple. It can implement Live Streaming and On-Demand Streaming Media. The principle is to split the video stream into a series of HTTP download files. Therefore, HLS has a higher latency than RTMP.

Frontend HLS

• Native support

• Flash Support

Finally, because MediaElement has been incorporated into the WordPress core audio and video library and its compatibility (see figure), MediaElement. js is the final choice.

Slice preparation

You can use m3u8downloader to download an HLS source, or use a node-m3u to generate m3u8 indexes and MPEG-TS slices. below is where we prepare slices:

https://github.com/miniflycn/HLS-demo/tree/master/m3u8

Note:

#EXTM3U#EXT-X-TARGETDURATION:11#EXT-X-VERSION:3#EXT-X-MEDIA-SEQUENCE:0#EXT-X-PLAYLIST-TYPE:VOD#EXTINF:10.133333,fileSequence0.ts#EXTINF:10.000666,fileSequence1.ts#EXTINF:10.667334,fileSequence2.ts#EXTINF:9.686001,fileSequence3.ts#EXTINF:9.768665,fileSequence4.ts#EXTINF:10.000000,fileSequence5.ts#EXT-X-ENDLIST

Where#EXT-X-ENDLISTIt is the end tag of the slice. If this tag is not found, the browser will request the index file after the file is read. If there is an update, the browser will continue to download the new file to achieve the live effect.

Front-end code

<! DOCTYPE html> 

Effect

Example source code

Https://github.com/miniflycn/HLS-demo