介绍
hls.js 是一个基于 JavaScript 的 HTTP Live Streaming (HLS) 客户端。它能够在浏览器中解码和播放 HLS 流。这个包非常适合前端开发人员使用，因为它可以轻松地将 HLS 视频流嵌入到网站中。
本文将讲解如何使用 npm 包 hls.js 来嵌入 HLS 视频流。我们将会对其相关的配置、API 方法以及示例代码进行详细介绍。
安装
首先，在项目目录下安装 hls.js：
npm install hls.js --save
然后，在你的 JavaScript 文件中导入该模块：
import Hls from 'hls.js';
配置
在使用 hls.js 前，你需要为其提供一个视频流地址。接着，你可以通过以下方法来配置 hls.js：
-- -------------------- ---- ------- ----- ----- - -------------------------------- ----- --- - ---------------------------------------- ----- --------- - - -- --- -- -- ------------------- - ----- --- - --- --------------- -------------------- ----------------------- -
其中，video 变量指向你想要嵌入视频流的 <video> 元素。url 变量是你的视频流地址。hlsConfig 对象中包含了一些可选配置项，例如：
-- -------------------- ---- ------- ----- --------- - - -------------- ----- -------------- -- - ---- - ----- -- ------------- ---------------- --- ------------------- ---- ------------------- ------ -- ---------- -------------------- --- -- ---------- -------------------- ------ -- ---------- --------------------- -- -- ---------- -------------- --- --
更详细的配置项请参考 官方文档。
API 方法
hls.js 提供了一些便捷的 API 方法可以让你控制视频的播放。以下是一些常用的方法：
hls.loadSource(url)
加载一个新的视频流地址。
hls.attachMedia(videoElement)
将当前视频流附加到指定的 <video> 元素上。
hls.startLoad()
开始加载视频数据。在调用 hls.loadSource() 后，hls.js 不会自动开始加载数据，需手动调用此方法来开始加载。
hls.stopLoad()
停止加载视频数据。
hls.destroy()
销毁 hls.js 实例。
更多 API 方法请参考 官方文档.
示例代码
下面是一个完整的示例代码，它会在指定元素中嵌入一个 HLS 视频流：
-- -------------------- ---- -------
--------- -----
------
------
------------- ------------
-------
------
---- --------------------
------ ----------- -----------------
------
------- ----------------------------------------------------------
--------
----- ----- - ----------------------------------
----- --- - ----------------------------------------
----- --------- - -
-- ---
--
-- ------------------- -
----- --- - --- ---------------
--------------------
-----------------------
---------------------------------- -- -- -
-------------
---
-
---------
-------
-------总
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33655