1.簡介

HTTP Live Streaming，也就是我們常說的HLS。HLS是蘋果公司提出的基于HTTP的流媒體網絡傳輸協議。類似于MPEG-DASH，但是HLS更加簡潔，它的基本原理也是服務端把文件或媒體流按照不同的碼率切分成一個個小片段進行傳輸，客戶端在播放碼流時，可以根據自身的帶寬及性能限制，在同一視頻内容的不同碼率的備用源中，選擇合适碼率的碼流進行下載播放。在傳輸會話開始時，客戶端首先需要下載描述不同碼流元數據的M3U8索引文件(類似于DASH中的MPD文件)。

與基于UDP的RTP協議不同，HLS請求僅使用HTTP傳輸，因此可以穿過任何允許HTTP數據通過的防火牆或代理服務器。這也便于使用傳統的HTTP服務器作為源，并廣泛使用基于HTTP的内容分發網絡來傳輸媒體流。

雖然HLS有上述優勢，但也同時存在延遲過大的劣勢。采用HLS直播的視頻流延時一般在10秒以上，使用推薦配置時延遲大概在30s，而RTMP直播的延遲最低可達到3、4秒，因此，在對實時性要求較高的場合，如互動直播，就要慎用HLS了。

1.1 HLS的格式

2. 流程

3. 前端集成（VUE前端框架）

3.1 依賴組件

3.1.1 方式一依賴包方式集成

• dependencies依賴包

"video.js":"^7.11.4", "videojs-contrib-hls":"^5.15.0",

• devDependencies依賴包

"@types/video.js":"^7.3.17",

3.1.2 方式二 JS文件本地集成

目前已經集成測試，但是JS方式集成遇到了videojs對象獲取問題，導緻流程沒有走通，有使用這種方式的可以交流一下經驗。

3.2 代碼集成

3.2.1 主程序入口 引入視頻播放樣式

import'video.js/dist/video-js.css';

3.2.2 頁面集成

<video :id="'myVideo' index" class="video-js vjs-big-play-centered vjs-fluid" playsinline preload="auto" width="200" height="200" data-setup="{}" > <sourcetype="application/x-mpegURL":src="HLSUrlCHange(item.hls_url)"/> </video>

3.2.3 後台集成(根據需求可以自動加載播放或者手動控制視頻播放)

this.getxueliangVideo.forEach((item:any,index:any)=>{ constdom=document.getElementById('myVideo' index); if(dom) { if(this.myPlayer!==null) { dom.style.display='block'; } } this.$nextTick(()=>{ this.myPlayer=videojs(dom, { // 确定播放器是否具有用戶可以與之交互的控件。沒有控件，啟動視頻播放的唯一方法是使用autoplay屬性或通過Player API。 controls:true, // 自動播放屬性,muted:靜音播放 autoplay:true, // 建議浏覽器是否應在<video>加載元素後立即開始下載視頻數據。 // preload: false, // 設置視頻播放器的顯示寬度（以像素為單位） // width: '200px', // 設置視頻播放器的顯示高度（以像素為單位） // height: '280px', controlBar: { playToggle:true, } }); // this.myPlayer.src({ src: this.mpegURL }); }); });

4. 踩坑點

• 跨域問題
• 視頻窗口大小、樣式等問題
• 視頻播放流暢性問題
• 部署服務或客戶端和視頻流服務器網絡問題

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!