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) Where
RTMP
It 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-ENDLIST
It 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