前端在瀏覽器端播放直播流協議的2種方式講解
更新時間：2024年07月29日 09:54:33 作者：不怕麻煩的鹿丸
直播依賴錄播所需要的播放技術,同時依賴HTTP FLV或者WebSocket中的一種協議來傳輸FLV,這篇文章主要給大家介紹了關于前端在瀏覽器端播放直播流協議的2種方式,需要的朋友可以參考下
直播流協議2種：.flv后綴是http-flv協議，.m3u8后綴是hls協議
一、播放.m3u8
1、hls.js
HLS (HTTP Live Streaming)是Apple公司研發(fā)的流媒體傳輸技術，包括一個m3u8的索引文件、多個ts分片文件和key加密串文件。這項技術主要應用于點播和直播領域。
hls.js是一個JavaScript庫，可實現HTTP Live Streaming客戶端。 它依靠HTML5視頻和MediaSource擴展進行播放。
它通過將MPEG-2傳輸流和AAC / MP3流轉換為ISO BMFF（MP4）片段來工作。 如果在瀏覽器中可用，可以使用Web Worker異步執(zhí)行此轉換。 WWDC2016期間宣布，hls.js還支持HLS + fmp4
hls.js不需要任何播放器，它可以直接在標準HTML 元素上運行。
hls.js用ECMAScript6（* .js）和TypeScript（* .ts）（ES6的強類型超集）編寫，并使用TypeScript編譯器在ECMAScript5中進行編譯。
特征
- VOD 和現場播放列表
- 實時播放列表上的 DVR 支持
- 碎片化的 MP4 容器
- MPEG-2 TS 容器
- ITU-T 建議書 H.264 和 ISO/IEC 14496-10 基本流
- ISO/IEC 13818-7 ADTS AAC 基本流
- ISO/IEC 11172-3 / ISO/IEC 13818-3（MPEG-1/2 Audio Layer III）基本流
- 打包元數據 (ID3v2.3.0) 基本流
- AAC 容器（僅音頻流）
- MPEG 音頻容器（MPEG-1/2 Audio Layer III 僅音頻流）
- HTTP Live Streaming 的定時元數據（ID3 格式，MPEG-2 TS 承載）
- AES-128 解密
- SAMPLE-AES 解密（僅當使用 MPEG-2 TS 容器時才支持）
- 對 DRM（數字權限管理）的加密媒體擴展 (EME) 支持
- Widevine CDM（僅在演示頁面上使用shaka-packager test-stream 進行測試）
- CEA-608/708 字幕
- WebVTT 字幕
- 用于 VoD 和現場播放列表的備用音軌再現（帶有備用音頻的主播放列表）
- 自適應流媒體
- 手動和自動質量切換
- 3種質量切換模式可用（可通過API方式控制）
- 即時切換（在當前視頻位置即時質量切換）
- 平滑切換（下一個加載片段的質量切換）
- 帶寬保守切換（下一個加載片段的質量切換更改，不刷新緩沖區(qū)）
- 在自動質量模式下，緊急關閉以防帶寬突然下降以最小化緩沖。
- 3種質量切換模式可用（可通過API方式控制）
- VoD & Live 上的準確搜索（不限于片段或關鍵幀邊界）
- 無需重新下載段即可在緩沖區(qū)和后臺緩沖區(qū)中查找的能力
- 內置分析
- 可以監(jiān)控所有內部事件（網絡事件、視頻事件）
- 播放會話指標也公開
- 容錯能力
- 庫中嵌入的重試機制
- 可以觸發(fā)恢復操作修復致命的媒體或網絡錯誤
2、使用hls.js
1. 安裝hls.js
npm i hls.js
2. 使用hls.js實現播放m3u8格式流，獲取video節(jié)點
<video id="video" ref="videoRef" autoplay width="800" height="400" controls></video>
import Hls from 'hls.js'
// 獲取視頻元素
var video = document.getElementById('video');
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
//
// If no native HLS support, check if HLS.js is supported
//
} else if (Hls.isSupported()) {
let config = {
xhrSetup: function (xhr, url) {
xhr.withCredentials = true; // 會攜帶cookie
// xhr.setRequestHeader('token',"my-token")
},
}
// 創(chuàng)建一個新的HLS實例
var hls = new Hls(config);
// 綁定 canplay 事件，當能夠播放時開始播放
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
// 綁定錯誤事件
hls.on(Hls.Events.ERROR, function(event, data) {
var errorType = data.type;
var errorDetails = data.details;
var errorFatal = data.fatal;
if (data.fatal) {
switch(data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
// 網絡錯誤處理
break;
case Hls.ErrorTypes.MEDIA_ERROR:
// 媒體錯誤處理
break;
default:
// 其他錯誤處理
break;
}
}
});
// 在video元素上附加MSE
hls.attachMedia(video);
// 開始加載HLS流
hls.loadSource('xxx.m3u8');
}
3. 銷毀
應調用以釋放使用的資源并銷毀 hls 上下文
hls.destroy()
4. 致命錯誤恢復
hls.js 提供了通過以下 2 種方法“嘗試”恢復致命網絡和媒體錯誤的方法：
hls.startLoad()
應調用以恢復網絡錯誤。
hls.recoverMediaError()
應調用以恢復媒體錯誤。
錯誤恢復示例代碼
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
// try to recover network error
console.log('fatal network error encountered, try to recover');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('fatal media error encountered, try to recover');
hls.recoverMediaError();
break;
default:
// cannot recover
hls.destroy();
break;
}
}
});hls.swapAudioCodec()
如果調用后仍然引發(fā)媒體錯誤hls.recoverMediaError()，調用此方法可能有助于解決音頻編解碼器不匹配的問題。工作流程應該是：
關于第一媒體錯誤：調用 hls.recoverMediaError()
如果在第一個媒體錯誤之后“快速”引發(fā)另一個媒體錯誤：首先調用hls.swapAudioCodec()，然后調用hls.recoverMediaError()。
5. 切換播放源
首先檢查hls對象是否已經定義，如果已定義，則停止當前的播放器實例。然后創(chuàng)建新的播放器實例，綁定到video元素，并開始加載新的播放源。加載成功后，播放器會自動開始播放新的視頻內容。如果在加載過程中發(fā)生錯誤，會有相應的錯誤處理邏輯。
if (typeof hls !== 'undefined') {
// 停止當前的播放器實例
hls.destroy();
}
// 新的播放源URL
var newVideoUrl = 'new_source_url.m3u8';
// 創(chuàng)建新的HLS播放器實例
var hls = new Hls();
// 綁定到video元素
var video = document.getElementById('video');
hls.attachMedia(video);
// 監(jiān)聽加載事件
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
// 錯誤處理
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
// 網絡錯誤處理
break;
case Hls.ErrorTypes.MEDIA_ERROR:
// 媒體錯誤處理
break;
default:
// 其他錯誤處理
break;
}
}
});
// 加載新的播放源
hls.loadSource(newVideoUrl);二、播放.flv
Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純原生 JavaScript 開發(fā)，沒有用到 Flash。由 bilibili 網站開源。它的工作原理是將 FLV 文件流轉碼復用成 ISO BMFF（MP4 碎片）片段，然后通過 Media Source Extensions 將 MP4 片段喂進瀏覽器。
1、安裝flv.js
npm i flv.js
2、使用flv.js實現播放flv格式流，獲取video節(jié)點
import flvjs from 'flv.js'
let videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv', //媒體類型
url: 'XXXX' //flv格式媒體URL
isLive: true, //數據源是否為直播流
hasAudio: false, //數據源是否包含有音頻
hasVideo: true, //數據源是否包含有視頻
enableStashBuffer: false //是否啟用緩存區(qū)
},{
enableWorker: false, //不啟用分離線程
enableStashBuffer: false, //關閉IO隱藏緩沖區(qū)
autoCleanupSourceBuffer: true //自動清除緩存
});
flvPlayer.attachMediaElement(videoElement); //將播放實例注冊到節(jié)點
flvPlayer.load(); //加載數據流
flvPlayer.play(); //播放數據流
}3、關閉視頻流
flvPlayer.pause(); //暫停播放數據流 flvPlayer.unload(); //取消數據流加載 flvPlayer.detachMediaElement(); //將播放實例從節(jié)點中取出 flvPlayer.destroy(); //銷毀播放實例
4、flv.js常用方法
1：flvjs.isSupported()：判斷當前瀏覽器是否支持播放 2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：創(chuàng)建一個播放實例 3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：將播放實例注冊到video節(jié)點 4：flvPlayer.load()：加載數據流 5：flvPlayer.play()：播放數據流 6：flvPlayer.pause()：暫停播放數據流 7：flvPlayer.unload()：取消數據流加載 8：flvPlayer.detachMediaElement()：將播放實例從節(jié)點中取出 9：flvPlayer.destroy()：銷毀播放實例
參考文檔
到此這篇關于前端在瀏覽器端播放直播流協議的2種方式講解的文章就介紹到這了,更多相關前端瀏覽器端播放直播流協議內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
使用ionic開發(fā)app的時候，會發(fā)現切換頁面的動畫會卡頓，并不流暢，為了保證用戶體驗，大家采用cordova提供的native transitions可以讓頁面切換近乎原型的體驗，一起通過本文學習下具體實現思路2016-12-12
這篇文章主要介紹了fastadmin中調用js的方法，在文中給大家補充介紹了Fastadmin里面的js運行原理,需要的朋友可以參考下2019-05-05
JavaScript樹的深度優(yōu)先遍歷和廣度優(yōu)先遍歷算法示例
這篇文章主要介紹了JavaScript樹的深度優(yōu)先遍歷和廣度優(yōu)先遍歷算法,結合實例形式分析了JavaScript樹的深度優(yōu)先遍歷、廣度優(yōu)先遍歷遞歸與非遞歸相關實現技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JS獲取表格內指定單元格html內容的方法,涉及javascript中innerHTML屬性的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JSON 的正確用法探討：Pyhong、MongoDB、JavaScript與Ajax
這篇文章主要介紹了JSON 的正確用法探討：Pyhong、MongoDB、JavaScript與Ajax的相關資料,具有參考借鑒價值，需要的朋友一起學習吧2016-05-05
本文給大家分享兩種方法來控制html元素的顯示和隱藏，分別利用html的style中兩個屬性，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
這篇文章主要介紹了原生JS實現的簡單輪播圖功能,結合實例形式分析了基于javascript定時器控制頁面元素動態(tài)變換實現輪播圖的相關操作技巧,需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細介紹了一個簡易時鐘效果js實現代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
這篇文章主要給大家介紹了關于angular 8.1使用過程中的一些記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
javascript 控制input只允許輸入的各種指定內容
這篇文章主要介紹了通過javascript控制input只允許輸入的各種指定內容,需要的朋友可以參考下2014-06-06