---

前言

當前主要的直播技術有三種，分別是RTMP、HLS、HTTP-FLV，其中RTMP和HTTP-FLV是HTTP長連線，每個時刻的資料收到後會立刻轉發，延時基本在1-3s之間，但這兩種技術都需要頁面端flash技術的支援，隨著chrome瀏覽器即將停止對flash的支援，這兩種方案變得不那麼友好，那麼就只能使用HLS技術來實現，當然，移動端和Safari是可以直接使用HTML5的viedo標籤直接播放，那麼其他瀏覽器需要做相容，像海康、大華等廠家的攝像頭也可以採用此種方式進行播放。

---

 

一、HLS協議是什麼？

HLS (HTTP Live Streaming)是Apple的動態位元速率自適應技術。主要用於PC和Apple終端的音視訊服務。包括一個m3u(8)的索引檔案，TS媒體分片檔案和key加密串檔案。

目前移動端和Safari可以用HTML5的viedo標籤直接播放，其他瀏覽器需要做相容，現在有很多的基於hls的相容方案，包括video.js的videojs/videojs-contrib-hls、hls.js、Chimeejs/chimee等。當然，我們也可以使用騰訊的tcplayer等封裝更加徹底，使用簡單的方案。

二、TCplayer使用步驟

1.引入庫

<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;

2.在HTML中放置容器

<div id="id_video" style="width:100%; height:auto;"></div>

3.對接視訊播放

var player = new TcPlayer('id_video', {
"m3u8": "http://test.net/test.m3u8", //請替換成實際可用的播放地址
"autoplay" : true,   //iOS 下 safari 瀏覽器，以及大部分移動端瀏覽器是不開放視訊自動播放這個能力的
"width" :  '480',//視訊的顯示寬度，請儘量使用視訊解析度寬度
"height" : '320'//視訊的顯示高度，請儘量使用視訊解析度高度
});

封面樣式、清晰度支援等其他配置可到官網檢視https://cloud.tencent.com/document/product/881/20207

 

---

總結

以上就是在網頁端播放hls協議視訊的步驟了。