EasyNVR live web camera program to build the front end of H5: How to Play HLS

Disclaimer: This article is EasyNVR technical team of the original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/EasyNVR/article/details/91817871

Background Description

HLS (HTTP Live Streaming) Apple's dynamic rate adaptation techniques, mainly for the PC and Apple audiovisual service terminal comprising a m3u (8) of the index file, segment file and the TS media key encryption string file. HTML5 streaming directly support this address, so long as the device is to support the H5 can decode and play.

HLS video stream

problem

EasyNVR team during the development of multi-screen, due to the multi-screen functionality does not require the phone side display (pc end multi-player as RTMP, the phone side to play as HLS), so only noticed references video.js to rtmp playback. However, the actual use, due to the needs of different projects, playing hls flow also need to be reflected.

video.js when playing rtmp, calling Flash to play, when playing hls calling h5 to play.

<source src="hls地址" type="application/x-mpegURL">

<source src="rtmp地址" type="video/mp4">

The main difference is that the main points of the form type.

solution

When we refer to the tag will video.js = '' by data-setup; to control, sometimes empty by default, is determined by video.js themselves, but must have the property;

If you want to play hls change: data-setup = '{ " techOrder": [ "hls"]}';
play h5 or flash, empathy;

If the playback hls, video type must be a type = "application / x-mpegURL";

See more usage of other network document examiner: http://docs.videojs.com/

professional team

In order to ensure normal and stable operation of our servers, EasyNVR a professional operation and maintenance (pre-sales support, business consulting, and maintenance) team, ready to respond quickly to customers deal with various contingencies, to ensure the smooth progress of the Internet broadcast. We also hope to achieve "delay 0", but the ideal full, the reality skinny. A perfect live behind every need devices, networks, and other processes with the completion of concurrency, so-called "butterfly effect", a small part will have any impact on the broadcast delay, EasyNVR team to do is to constantly improve the development of Internet Broadcast System to ensure that live low-latency, stability, and high-definition video playback smooth.

professional team

EasyNVR security cameras web streaming service

EasyNVR have is a full, independent, controllable intellectual property rights, but also can have the function of security software and hardware integration of Internet streaming media server, network camera through a simple channel configuration, monitoring industry inside traditional high-definition network camera IP Camera , etc. with the NVR RTSP, Onvif protocol output device access to EasyNVR, EasyNVR these audio and video data can be video sources is a pull, is converted to RTMP / HLS, full internet terminal H5 live (Web, Android, iOS), and EasyNVR able to broadcast live video source of data to a third party CDN network, Internet-scale distributed. EasyNVR details you may visit the official website: http://www.easynvr.com
EasyNVR scenarios

Smart City

EasyNVR scenarios

Classic Case

Guess you like

Origin blog.csdn.net/EasyNVR/article/details/91817871