EasyNVR攝像機網頁無插件直播方案H5前端構建之：如何播放HLS（m3u8）直播流

背景描述

HLS (HTTP Live Streaming)是Apple的動態碼率自適應技術，主要用於PC和Apple終端的音視頻服務，包括一個m3u(8)的索引文件，TS媒體分片文件和key加密串文件。HTML5直接支持這個流地址，所以只要是支持H5的設備均可以解碼播放。

問題概述

EasyNVR團隊在進行多屏開發時，因爲多屏功能不須要在手機端展現（pc端多播放爲RTMP，手機端播放爲HLS），所以只注意到了引用video.js來進行rtmp的播放。但實際使用中，因爲項目需求不一樣，hls流的播放也須要體現出來。

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

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

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

二者主要的不一樣點主要在於type的形式。

解決方案

當咱們在標籤中引用video.js時會經過data-setup=’’；來進行控制，有時默認爲空，由video.js本身來決定，可是必需要有該屬性；

若是是要播放 hls 就改爲：data-setup=’{「techOrder」: [「hls」]}’ ；
播放h5或flash，同理；

若是播放hls，video type 必定要是 type=「application/x-mpegURL」；

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

專業團隊

爲了保障咱們的服務器正常穩定運做，EasyNVR有專業的運維（售前支撐、商務諮詢、售後維護）團隊，隨時對客戶各類突發狀況快速響應處理，保證互聯網直播的順利進行。咱們也但願實現「0延時」，但理想豐滿，現實骨感。每個完美的直播背後都須要設備、網絡、併發量等流程配合完成，正所謂「蝴蝶效應」，任何一個小環節都會對直播延時產生影響，EasyNVR團隊要作的就是不斷完善開發互聯網直播系統，保證直播的低延時、穩定性，同時視頻播放高清流暢。

EasyNVR安防攝像機網頁流媒體服務

EasyNVR是一款擁有完整、自主、可控知識產權，同時又可以具有軟硬一體功能的安防互聯網化流媒體服務器，可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP、Onvif協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發。詳情可訪問EasyNVR官網：http://www.easynvr.com

智慧城市

經典案例