前端在瀏覽器端播放直播流協(xié)議的2種方式講解
直播流協(xié)議2種：.flv后綴是http-flv協(xié)議，.m3u8后綴是hls協(xié)議
一、播放.m3u8
1、hls.js
HLS (HTTP Live Streaming)是Apple公司研發(fā)的流媒體傳輸技術(shù)，包括一個(gè)m3u8的索引文件、多個(gè)ts分片文件和key加密串文件。這項(xiàng)技術(shù)主要應(yīng)用于點(diǎn)播和直播領(lǐng)域。
hls.js是一個(gè)JavaScript庫(kù)，可實(shí)現(xiàn)HTTP Live Streaming客戶端。 它依靠HTML5視頻和MediaSource擴(kuò)展進(jìn)行播放。
它通過(guò)將MPEG-2傳輸流和AAC / MP3流轉(zhuǎn)換為ISO BMFF（MP4）片段來(lái)工作。 如果在瀏覽器中可用，可以使用Web Worker異步執(zhí)行此轉(zhuǎn)換。 WWDC2016期間宣布，hls.js還支持HLS + fmp4
hls.js不需要任何播放器，它可以直接在標(biāo)準(zhǔn)HTML 元素上運(yùn)行。
hls.js用ECMAScript6（* .js）和TypeScript（* .ts）（ES6的強(qiáng)類(lèi)型超集）編寫(xiě)，并使用TypeScript編譯器在ECMAScript5中進(jìn)行編譯。
特征
- VOD 和現(xiàn)場(chǎng)播放列表
- 實(shí)時(shí)播放列表上的 DVR 支持
- 碎片化的 MP4 容器
- MPEG-2 TS 容器
- ITU-T 建議書(shū) 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）基本流
- 打包元數(shù)據(jù) (ID3v2.3.0) 基本流
- AAC 容器（僅音頻流）
- MPEG 音頻容器（MPEG-1/2 Audio Layer III 僅音頻流）
- HTTP Live Streaming 的定時(shí)元數(shù)據(jù)（ID3 格式，MPEG-2 TS 承載）
- AES-128 解密
- SAMPLE-AES 解密（僅當(dāng)使用 MPEG-2 TS 容器時(shí)才支持）
- 對(duì) DRM（數(shù)字權(quán)限管理）的加密媒體擴(kuò)展 (EME) 支持
- Widevine CDM（僅在演示頁(yè)面上使用shaka-packager test-stream 進(jìn)行測(cè)試）
- CEA-608/708 字幕
- WebVTT 字幕
- 用于 VoD 和現(xiàn)場(chǎng)播放列表的備用音軌再現(xiàn)（帶有備用音頻的主播放列表）
- 自適應(yīng)流媒體
- 手動(dòng)和自動(dòng)質(zhì)量切換
- 3種質(zhì)量切換模式可用（可通過(guò)API方式控制）
- 即時(shí)切換（在當(dāng)前視頻位置即時(shí)質(zhì)量切換）
- 平滑切換（下一個(gè)加載片段的質(zhì)量切換）
- 帶寬保守切換（下一個(gè)加載片段的質(zhì)量切換更改，不刷新緩沖區(qū)）
- 在自動(dòng)質(zhì)量模式下，緊急關(guān)閉以防帶寬突然下降以最小化緩沖。
- 3種質(zhì)量切換模式可用（可通過(guò)API方式控制）
- VoD & Live 上的準(zhǔn)確搜索（不限于片段或關(guān)鍵幀邊界）
- 無(wú)需重新下載段即可在緩沖區(qū)和后臺(tái)緩沖區(qū)中查找的能力
- 內(nèi)置分析
- 可以監(jiān)控所有內(nèi)部事件（網(wǎng)絡(luò)事件、視頻事件）
- 播放會(huì)話指標(biāo)也公開(kāi)
- 容錯(cuò)能力
- 庫(kù)中嵌入的重試機(jī)制
- 可以觸發(fā)恢復(fù)操作修復(fù)致命的媒體或網(wǎng)絡(luò)錯(cuò)誤
2、使用hls.js
1. 安裝hls.js
npm i hls.js
2. 使用hls.js實(shí)現(xiàn)播放m3u8格式流，獲取video節(jié)點(diǎn)
<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; // 會(huì)攜帶cookie
// xhr.setRequestHeader('token',"my-token")
},
}
// 創(chuàng)建一個(gè)新的HLS實(shí)例
var hls = new Hls(config);
// 綁定 canplay 事件，當(dāng)能夠播放時(shí)開(kāi)始播放
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
// 綁定錯(cuò)誤事件
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:
// 網(wǎng)絡(luò)錯(cuò)誤處理
break;
case Hls.ErrorTypes.MEDIA_ERROR:
// 媒體錯(cuò)誤處理
break;
default:
// 其他錯(cuò)誤處理
break;
}
}
});
// 在video元素上附加MSE
hls.attachMedia(video);
// 開(kāi)始加載HLS流
hls.loadSource('xxx.m3u8');
}
3. 銷(xiāo)毀
應(yīng)調(diào)用以釋放使用的資源并銷(xiāo)毀 hls 上下文
hls.destroy()
4. 致命錯(cuò)誤恢復(fù)
hls.js 提供了通過(guò)以下 2 種方法“嘗試”恢復(fù)致命網(wǎng)絡(luò)和媒體錯(cuò)誤的方法：
hls.startLoad()
應(yīng)調(diào)用以恢復(fù)網(wǎng)絡(luò)錯(cuò)誤。
hls.recoverMediaError()
應(yīng)調(diào)用以恢復(fù)媒體錯(cuò)誤。
錯(cuò)誤恢復(fù)示例代碼
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()
如果調(diào)用后仍然引發(fā)媒體錯(cuò)誤hls.recoverMediaError()，調(diào)用此方法可能有助于解決音頻編解碼器不匹配的問(wèn)題。工作流程應(yīng)該是：
關(guān)于第一媒體錯(cuò)誤：調(diào)用 hls.recoverMediaError()
如果在第一個(gè)媒體錯(cuò)誤之后“快速”引發(fā)另一個(gè)媒體錯(cuò)誤：首先調(diào)用hls.swapAudioCodec()，然后調(diào)用hls.recoverMediaError()。
5. 切換播放源
首先檢查hls對(duì)象是否已經(jīng)定義，如果已定義，則停止當(dāng)前的播放器實(shí)例。然后創(chuàng)建新的播放器實(shí)例，綁定到video元素，并開(kāi)始加載新的播放源。加載成功后，播放器會(huì)自動(dòng)開(kāi)始播放新的視頻內(nèi)容。如果在加載過(guò)程中發(fā)生錯(cuò)誤，會(huì)有相應(yīng)的錯(cuò)誤處理邏輯。
if (typeof hls !== 'undefined') {
// 停止當(dāng)前的播放器實(shí)例
hls.destroy();
}
// 新的播放源URL
var newVideoUrl = 'new_source_url.m3u8';
// 創(chuàng)建新的HLS播放器實(shí)例
var hls = new Hls();
// 綁定到video元素
var video = document.getElementById('video');
hls.attachMedia(video);
// 監(jiān)聽(tīng)加載事件
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
});
// 錯(cuò)誤處理
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
// 網(wǎng)絡(luò)錯(cuò)誤處理
break;
case Hls.ErrorTypes.MEDIA_ERROR:
// 媒體錯(cuò)誤處理
break;
default:
// 其他錯(cuò)誤處理
break;
}
}
});
// 加載新的播放源
hls.loadSource(newVideoUrl);二、播放.flv
Flv.js 是 HTML5 Flash 視頻（FLV）播放器，純?cè)?JavaScript 開(kāi)發(fā)，沒(méi)有用到 Flash。由 bilibili 網(wǎng)站開(kāi)源。它的工作原理是將 FLV 文件流轉(zhuǎn)碼復(fù)用成 ISO BMFF（MP4 碎片）片段，然后通過(guò) Media Source Extensions 將 MP4 片段喂進(jìn)瀏覽器。
1、安裝flv.js
npm i flv.js
2、使用flv.js實(shí)現(xiàn)播放flv格式流，獲取video節(jié)點(diǎn)
import flvjs from 'flv.js'
let videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv', //媒體類(lèi)型
url: 'XXXX' //flv格式媒體URL
isLive: true, //數(shù)據(jù)源是否為直播流
hasAudio: false, //數(shù)據(jù)源是否包含有音頻
hasVideo: true, //數(shù)據(jù)源是否包含有視頻
enableStashBuffer: false //是否啟用緩存區(qū)
},{
enableWorker: false, //不啟用分離線程
enableStashBuffer: false, //關(guān)閉IO隱藏緩沖區(qū)
autoCleanupSourceBuffer: true //自動(dòng)清除緩存
});
flvPlayer.attachMediaElement(videoElement); //將播放實(shí)例注冊(cè)到節(jié)點(diǎn)
flvPlayer.load(); //加載數(shù)據(jù)流
flvPlayer.play(); //播放數(shù)據(jù)流
}3、關(guān)閉視頻流
flvPlayer.pause(); //暫停播放數(shù)據(jù)流 flvPlayer.unload(); //取消數(shù)據(jù)流加載 flvPlayer.detachMediaElement(); //將播放實(shí)例從節(jié)點(diǎn)中取出 flvPlayer.destroy(); //銷(xiāo)毀播放實(shí)例
4、flv.js常用方法
1：flvjs.isSupported()：判斷當(dāng)前瀏覽器是否支持播放 2：flvPlayer = flvjs.createPlayer(mediaDataSource: MediaDataSource, config?: Config)：創(chuàng)建一個(gè)播放實(shí)例 3：flvPlayer.attachMediaElement(mediaElement: HTMLMediaElement)：將播放實(shí)例注冊(cè)到video節(jié)點(diǎn) 4：flvPlayer.load()：加載數(shù)據(jù)流 5：flvPlayer.play()：播放數(shù)據(jù)流 6：flvPlayer.pause()：暫停播放數(shù)據(jù)流 7：flvPlayer.unload()：取消數(shù)據(jù)流加載 8：flvPlayer.detachMediaElement()：將播放實(shí)例從節(jié)點(diǎn)中取出 9：flvPlayer.destroy()：銷(xiāo)毀播放實(shí)例
參考文檔
到此這篇關(guān)于前端在瀏覽器端播放直播流協(xié)議的2種方式講解的文章就介紹到這了,更多相關(guān)前端瀏覽器端播放直播流協(xié)議內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類(lèi)型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了表單驗(yàn)證正則表達(dá)式實(shí)例代碼詳解的相關(guān)資料,需要的朋友可以參考下2015-11-11
JS實(shí)現(xiàn)微信"炸屎"大作戰(zhàn)功能
這篇文章主要介紹了JS實(shí)現(xiàn)微信 "炸屎"大作戰(zhàn),本文通過(guò)實(shí)例代碼圖文展示給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
three.js響應(yīng)式設(shè)計(jì)實(shí)例詳解
響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive?Web?design)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局,是目前比較流行的一種網(wǎng)頁(yè)設(shè)計(jì),下面這篇文章主要給大家介紹了關(guān)于three.js響應(yīng)式設(shè)計(jì)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【凹多邊形的分離軸檢測(cè)算法】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript針對(duì)凹多邊形的分離軸檢測(cè)算法相關(guān)概念、原理、實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2018-12-12
前幾天一個(gè)項(xiàng)目讓我頭疼了很久，一個(gè)關(guān)于圖片加載時(shí)的loading效果，因?yàn)椴皇翘甹s，所以在網(wǎng)上各種找資料，但還是不理想，無(wú)賴苦心研究，終于有了一點(diǎn)眉目了，雖然個(gè)中還有一些道理不懂，至少目的達(dá)到了2013-11-11
打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
本文給大家介紹javascript中的閉包，包括對(duì)js閉包概念的理解，閉包的幾種寫(xiě)法和用法，閉包的主要作用，閉包與this對(duì)象，閉包與內(nèi)存泄露及使用閉包的注意點(diǎn)相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
通用的javascript 換行色換列色的小js...2007-04-04
JavaScript實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)一個(gè)帶并發(fā)限制的異步調(diào)度器?Scheduler,保證同時(shí)運(yùn)行的任務(wù)最多有N個(gè),感興趣的小伙伴可以了解下2024-03-03