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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.