Hls.js 使用文檔

Lishuyu 2021-10-13 18:50:46
hls.js hls js 使用


Hls.js 使用文檔

前言

hls.js是一個JavaScript庫,可實現HTTP Live Streaming客戶端。 它依靠HTML5視頻和MediaSource擴展進行播放。

它通過將MPEG-2傳輸流和AAC / MP3流轉換為ISO BMFF(MP4)片段來工作。 如果在瀏覽器中可用,可以使用Web Worker异步執行此轉換。 WWDC2016期間宣布,hls.js還支持HLS + fmp4

hls.js不需要任何播放器,它可以直接在標准HTML 元素上運行。

hls.js用ECMAScript6(* .js)和TypeScript(* .ts)(ES6的强類型超集)編寫,並使用TypeScript編譯器在ECMAScript5中進行編譯。

用TS和純JS / ES6編寫的模塊可以相互依賴,也可以相互導入/要求。

為了構建發行包並為我們的開發環境提供服務,使用Webpack。

github地址:github.com/video-dev/h…

特征

  • 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) 支持

  • CEA-608/708 字幕

  • WebVTT 字幕

  • 用於 VoD 和現場播放列錶的備用音軌再現(帶有備用音頻的主播放列錶)

  • 自適應流媒體

    • 手動和自動質量切換

      • 3種質量切換模式可用(可通過API方式控制)

        • 即時切換(在當前視頻比特置即時質量切換)
        • 平滑切換(下一個加載片段的質量切換)
        • 帶寬保守切換(下一個加載片段的質量切換更改,不刷新緩沖區)
      • 在自動質量模式下,緊急關閉以防帶寬突然下降以最小化緩沖。

  • VoD & Live 上的准確搜索(不限於片段或關鍵幀邊界)

  • 無需重新下載段即可在緩沖區和後臺緩沖區中查找的能力

  • 內置分析

    • 可以監控所有內部事件(網絡事件、視頻事件)
    • 播放會話指標也公開
  • 容錯能力

    • 庫中嵌入的重試機制
    • 可以觸發恢複操作修複致命的媒體或網絡錯誤
  • 冗餘/故障轉移播放列錶

支持的 M3U8 標簽

有關 HLS 格式和這些標簽含義的詳細信息,請參閱tools.ietf.org/html/draft-…

清單標簽

  • #EXT-X-STREAM-INF:<attribute-list> <URI>
  • #EXT-X-MEDIA:<attribute-list>
  • #EXT-X-SESSION-DATA:<attribute-list>

以下屬性已添加到其各自變體的屬性列錶中,但未在其選擇和播放中實現。

  • VIDEO-RANGEHDCP-LEVEL(見#2489

播放列錶標簽

  • #EXTM3U
  • #EXT-X-VERSION=<n>
  • #EXTINF:<duration>,[<title>]
  • #EXT-X-ENDLIST
  • #EXT-X-MEDIA-SEQUENCE=<n>
  • #EXT-X-TARGETDURATION=<n>
  • #EXT-X-DISCONTINUITY
  • #EXT-X-DISCONTINUITY-SEQUENCE=<n>
  • #EXT-X-BYTERANGE=<n>[@<o>]
  • #EXT-X-MAP:<attribute-list>
  • #EXT-X-KEY:<attribute-list>METHOD=SAMPLE-AES僅支持 MPEG-2 TS 段)
  • #EXT-X-PROGRAM-DATE-TIME:<attribute-list>
  • #EXT-X-START:TIME-OFFSET=<n>
  • #EXT-X-SERVER-CONTROL:<attribute-list>
  • #EXT-X-PART-INF:PART-TARGET=<n>
  • #EXT-X-PART:<attribute-list>
  • #EXT-X-PRELOAD-HINT:<attribute-list>
  • #EXT-X-SKIP:<attribute-list>
  • #EXT-X-RENDITION-REPORT:<attribute-list>

以下標簽被添加到各自片段的屬性列錶中,但未在流媒體和播放中實現。

  • #EXT-X-DATERANGE:<attribute-list>(未添加到元數據 TextTracks。見#2218
  • #EXT-X-BITRATE (未用於 ABR 控制器)
  • #EXT-X-GAP(未實現。見#2940

不支持

有關問題的完整列錶,請參閱“發布計劃和待辦事項”項目選項卡中的“最高優先級”。編解碼器支持取决於運行時環境(例如,並非同一操作系統上的所有瀏覽器都支持 HEVC)。

  • CMAF CC 支持#2623
  • Emsg“元數據”TextTracks 中 FMP4(Emsgv1 中的 ID3)的帶內定時元數據#2360
  • #EXT-X-DATERANGE在“元數據”TextTracks #2218
  • #EXT-X-GAP填充#2940
  • #EXT-X-I-FRAME-STREAM-INF I 幀媒體播放列錶文件
  • SAMPLE-AES 帶有 fmp4、aac、mp3、vtt... 片段(僅限 MPEG-2 TS)
  • PlayReady 和 FairPlay DRM(參見#3779標記為 DRM 的問題
  • 基於運行時媒體功能的高級變體選擇(請參閱標記為 的問題media-capabilities
  • Windows 10 上的 IE 和 Edge (<=18) 中的 MP3 基本流音頻(請參閱#1641Microsoft 回答論壇

服務器端渲染 (SSR) 和require來自 Node.js 運行時

您可以安全地在 Node 中使用這個庫,絕對不會發生任何事情。導出一個虛擬對象,以便要求庫不會引發錯誤。HLS.js 在 Node.js 中不可實例化。有關更多詳細信息,請參閱#1841

依賴

1.node.js
2.npm
3.git
4.webpack
5.webpack-cli
複制代碼

demo項目

首先拉取github中的項目代碼,並安裝所需依賴(示例項目需要vpn才能播放視頻流)

git clone https://github.com/video-dev/hls.js.git
cd hls.js
# 代碼拉取完成後確保依賴的安裝及更新
npm install ci
# 在開發環境下運行demo頁面(用file-watch重新編譯項目,但不生成dist包),運行不成功的話嘗試使用npm install解决報錯
npm run dev
# 若有變更使用 sanity-check檢查變更後再進行提交
npm run sanity-check
複制代碼

使用

第一步:設置和支持

首先在您的網頁中包含https://cdn.jsdelivr.net/npm/hls.js@latest(或未/hls.js縮小)。

<script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script>
複制代碼

調用以下靜態方法:Hls.isSupported()檢查您的瀏覽器是否支持MediaSource Extensions

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
 if (Hls.isSupported()) {
   console.log('hello hls.js!');
}
</script>
複制代碼

第二步:實例化Hls對象並綁定到<video>元素

讓我們

  • 創建一個<video>元素
  • 創建一個新的 HLS 對象
  • 將視頻元素綁定到此 HLS 對象
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
​
<video id="video"></video>
<script>
 if (Hls.isSupported()) {
   var video = document.getElementById('video');
   var hls = new Hls();
   // bind them together
   hls.attachMedia(video);
   // MEDIA_ATTACHED event is fired by hls object once MediaSource is ready
   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
     console.log('video and hls.js are now bound together !');
  });
}
</script>
複制代碼

第三步:加載清單

您需要提供如下清單 URL:

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
​
<video id="video"></video>
<script>
 if (Hls.isSupported()) {
   var video = document.getElementById('video');
   var hls = new Hls();
   // bind them together
   hls.attachMedia(video);
   hls.on(Hls.Events.MEDIA_ATTACHED, function () {
     console.log('video and hls.js are now bound together !');
     hls.loadSource('http://my.streamURL.com/playlist.m3u8');
     hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
       console.log(
         'manifest loaded, found ' + data.levels.length + ' quality level'
      );
    });
  });
}
</script>
複制代碼

第四步:通過<video>元素控制

視頻是通過 HTML<video>元素控制的。

HTMLVideoElement 控件和事件可以無縫使用。

video.play();
複制代碼

第五步:錯誤處理

所有錯誤都通過唯一的單個事件發出信號。

每個錯誤按以下方式分類:

  • 它的類型:

    • Hls.ErrorTypes.NETWORK_ERROR 對於網絡相關的錯誤
    • Hls.ErrorTypes.MEDIA_ERROR 媒體/視頻相關錯誤
    • Hls.ErrorTypes.OTHER_ERROR 對於所有其他錯誤
  • 它的詳細信息:

  • 它的死亡率:

    • false 如果錯誤不是致命的,hls.js 將嘗試恢複它
    • true 如果錯誤是致命的,則需要采取措施(嘗試)恢複它。

完整的細節描述如下

請參閱下面的示例代碼以偵聽錯誤:

hls.on(Hls.Events.ERROR, function (event, data) {
 var errorType = data.type;
 var errorDetails = data.details;
 var errorFatal = data.fatal;
​
 switch (data.details) {
   case Hls.ErrorDetails.FRAG_LOAD_ERROR:
     // ....
     break;
   default:
     break;
}
});
複制代碼

致命錯誤恢複

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()

如果調用後仍然引發媒體錯誤hls.recoverMediaError(),調用此方法可能有助於解决音頻編解碼器不匹配的問題。工作流程應該是:

關於第一媒體錯誤:調用 hls.recoverMediaError()

如果在第一個媒體錯誤之後“快速”引發另一個媒體錯誤:首先調用hls.swapAudioCodec(),然後調用hls.recoverMediaError()

最後一步:銷毀,在流之間切換

hls.destroy() 應調用以釋放使用的資源並銷毀 hls 上下文。

npm安裝過程報錯解决方法

request to registry.cnpmjs.org/webpack-cli failed, reason: Hostname/IP does not match certificate's altnames: Host: registry.cnpmjs.org. is not in the cert's altnames: DNS:r.cnpmjs.org

npm config set strict-ssl false
複制代碼

In most cases you are behind a proxy or have bad network settings.

解决辦法:
1. 執行:
npm config get proxy
npm config get https-proxy
如果返回值不為null,繼續執行:
(這一步很重要,一定要保證兩個命令的返回值都為null,話說回來,應該出現這個錯誤這兩個返回值有不為null的)
npm config set proxy null
npm config set https-proxy null
2. 執行:
npm config set registry http://registry.cnpmjs.org/
3. 安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
複制代碼
版权声明
本文为[Lishuyu]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/10/20211013185045788C.html

  1. 前端开发框架Vue中Vuex的使用原理分享
  2. vue-echarts初次体验
  3. 分享一些web前端开发好用的网站
  4. 每天读一点webpack-003
  5. react之组件生命周期
  6. Alibaba collection version of mybatis handwritten documents, Java front-end interview questions
  7. SpringBoot Java后端实现okhttp3超时设置
  8. react之組件生命周期
  9. Cycle de vie des composants de React
  10. 使用Reactor将阻塞调用变为异步非阻塞
  11. Baked cake wife sun photos, plain face on camera, beautiful appearance is still a beauty, watching children during the festival is a little helpless
  12. 亚洲知名插画师荒川(arakawa) 仅8件独版NFT作品系列《Can't Out》正式上架Element综合市场
  13. Taiyuan: singing, welcoming the national day, gathering to praise blessings
  14. Arakawa, un illustrateur Asiatique bien connu, n'a mis sur le marché que huit pièces de la collection NFT "can't out" en une seule édition.
  15. Résumé des questions d'entrevue Hadoop (II) - - hdfs
  16. 如何解决“Serverless”系统的冷启动问题
  17. BootstrapBlazor 模板安装
  18. BootstrapBlazor 模板安装
  19. Tong Liya Jin Chen bumps her hair, Xie Na Zhao Liying bumps her shirt, and she sees EQ from the reaction
  20. 使用ESLint+Prettier来统一前端代码风格
  21. 为什么说 Node.js 是实时应用程序开发的绝佳选择
  22. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  23. 使用elementui在完成项目中遇到的未知知识点2
  24. On the mechanism of webpack loader
  25. 云原生体系下 Serverless 弹性探索与实践
  26. vue开发技巧
  27. Une fleur merveilleuse de l'histoire de l'industrie des nouveaux véhicules énergétiques, Zhongtai Jiangnan T11, une voiture vintage que vous n'avez jamais vue
  28. 致敬!再见了!LayUI !
  29. Vue安装和卸载
  30. Implement a flipped character with the transform attribute of CSS
  31. 你的第一个 Docker + React + Express 全栈应用
  32. [apprentissage de l'algorithme] 1486. Fonctionnement exclusif du tableau (Java / C / C + + / python / go / Rust)
  33. Zhang Daxian sends a blessing video on xYG relay, showing positive energy in details
  34. 前端技巧-JS元编程ES6 symbol公开符号
  35. Article de 37 ans seul à l'hôpital!Il boitait, soupçonnait d'être blessé, souriait avec douleur
  36. 前端推荐!10分钟带你了解Konva运行原理
  37. npm ERR! iview-project@3.0.0 init: `webpack --progress --config webpack.dev.config.js
  38. 零基础学习Web前端需要注意什么呢?
  39. The Youth League promotes Yiyang Qianxi new film, and the relationship between the two generation and the generation is good. Li Fei is blessed.
  40. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  41. JavaScript数组 几个常用方法
  42. Qu'est - ce qu'il faut remarquer à l'avant - plan Web de l'apprentissage de base zéro?
  43. 暢談this的四種綁定方式
  44. 2021最新Vue面试必胜宝典,大厂面试题解析!
  45. Quatre façons de lier ceci
  46. Préparation au développement de l'extension tagdown
  47. Intervieweur: Parlez - moi des flotteurs CSS
  48. Packaging the View Component Library with rollup
  49. Comment un composant enfant modifie les valeurs passées par le composant parent
  50. Résumé de l'API Express
  51. Optimisation de la structure du Code if else dans le projet
  52. Fonction magique pour résoudre le problème de la fonction maybe - - fonction either
  53. 新手学前端的方法是什么 自学前端该怎么规划
  54. 云原生体系下 Serverless 弹性探索与实践
  55. 如何全方位打造安全高效的HTTPS站点(一)
  56. "Liu Jing dit che 丨 point de vue" est - ce que Custom Road est un MpV digne de la terre?
  57. 从理念到LRU算法实现,起底未来React异步开发方式
  58. Compared with Volvo XC60, Lingke 09 goes out of the spa platform. What would you choose, regardless of the brand?
  59. PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
  60. 云原生体系下 Serverless 弹性探索与实践