LiveNVR H5無插件直播方案前端建構之：如何播放HLS

之前在進行LiveNVR多屏開發的時候，由于多屏功能不需要在手機端展示出來（pc多點傳播放為RTMP，手機端播放為HLS），是以隻注意到了引用videojs來進行rtmp的播放。由于不同項目需求不同，對hls流的播放也需要展現出來。

videojs在播放rtmp時，是調用Flash來進行播放的，在播放hls時是調用h5來播放的。

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

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

主要的不同點在于type的形式

當我們在标簽中引用videojs時會通過data-setup=’’；來進行控制，我們有時預設為空，由videojs自己來覺定，但是必須要有該屬性；

如果是要播放 hls 就改成這樣

data-setup=’{“techOrder”: [“hls”]}’ ；

播放h5或flash，同理；

如果 我們播放方hls， video type 一定要是 type=“application/x-mpegURL”；

其他更多的用法請參考官網文檔：​​​http://docs.videojs.com/​​

關于LiveNVR

LiveNVR能夠通過簡單的網絡錄影機通道配置，将傳統監控行業裡面的高清網絡錄影機IP Camera、NVR等具有RTSP協定輸出的裝置接入到LiveNVR，LiveNVR能夠将這些視訊源的音視訊資料進行拉取，轉換為RTMP/HLS，進行全平台終端H5直播（Web、Android、iOS），并且EasyNVR能夠将視訊源的直播資料對接到第三方CDN網絡，實作網際網路級别的直播分發；

擷取更多資訊