本文将介绍如何使用 npm 包 videojs-contrib-hls 来实现基于 HLS 协议的视频播放器。HLS 是一种流媒体协议，支持 HTTP 传输，并能够适应网络带宽的变化，因此在移动设备和低带宽网络环境下表现较为优秀。
安装
首先需要安装 video.js 和 videojs-contrib-hls：
npm install --save video.js videojs-contrib-hls
引入
在 HTML 文件中引入 video.js 和 videojs-contrib-hls 的 CSS 和 JavaScript：
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>
使用
使用 videojs 函数创建一个视频元素，并通过 src 属性指定 HLS 流的 URL：
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
<source src="https://example.com/hls/stream.m3u8" type="application/x-mpegURL">
</video>
<script>
var player = videojs('my-video');
</script>如果你想要实现自适应码率，可以使用 videojs-contrib-hls 提供的插件。首先需要添加一个 <script> 标签来启用自适应码率：
<script>
videojs.Html5DashJS.hlsjsOptions = {
debug: false,
enableWorker: true
};
</script>然后将 HlsjsSourceHandler 插件添加到 videojs 实例中：
-- -------------------- ---- -------
--- ------ - ------------------- -
-------- -
-------------------------- -
-------- -------
------------- ----
--
------ -
--------------- ----
-
-
---示例代码
下面是一个完整的示例代码，包含了自适应码率和画中画功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------------------------- -----------------
------- ----------------------------------------------------------
------- -------------------------------------------------------------------------------------------------------
-------
------
------ ------------- --------------- ----------------- -------- -------------- ----------- -------------
------- ----------------------------------------- -----------------------------
--------
--------
-------------------------------- - -
------ ------
------------- ----
--
--- ------ - ------------------- -
-------- -
-------------------------- -
-------- -------
------------- ----
--
------ -
--------------- ----
-
-
---
----------------------------- ---------- -
-- ----------------------- -
-------------------------------
- ---- -
------------------------------
-
---
---------
-------
-------总结
通过 videojs-contrib-hls，我们可以轻松地实现基于 HLS 协议的视频播放器，并且能够支持自适应码率和画中画功能。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34360