前言
随着互联网的不断发展，视频在我们生活中越来越普遍，越来越重要。前端开发中，播放视频成为了很常见的需求。而 videojs-contrib-hls-webpack 就是一个非常便捷的 npm 包，可以给我们的前端应用提供 HLS 视频播放的能力。本文将会介绍 videojs-contrib-hls-webpack 的使用教程，从安装到基本使用，供大家参考。
安装配置
首先，我们需要安装 videojs-contrib-hls-webpack，可以通过 npm 进行安装。
npm install --save videojs-contrib-hls-webpack
安装完毕后，我们需要在项目中引入 videojs-contrib-hls-webpack，具体方式是在 webpack.config.js 文件中进行配置：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
--
-
----- ---------
---- ---------------- -------------
--
-
----- ----------
---- ---------------- ------------- --------------
--
-
----- --------------------------------
---- -
-
------- -------------
-------- -
------ ------
----- ---------------------------
-
-
-
--
-
----- --------------------------------------------
---- -
-
------- -------------
-------- -
------ ------
----- -----------------------------
-
-
-
-
-
--
-------- -
------ -
------- ----------------------
---- --------------
-
--
-------- -
--- -------------------
--------- -------------
--------- -------------
------- ----
---
--- -----------------------
--- -----------------------
-- ---------
------- --------
--
-
--基本使用
有了配置，我们就可以在我们的应用中使用 videojs-contrib-hls-webpack 了。具体使用方法如下：
- 导入样式文件：
import 'video.js/dist/video-js.css'; // video.js 样式文件 import 'videojs-contrib-hls';
- 在我们的 html 文件中加入视频播放的容器：
<div> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"></video> </div>
- 在我们的 js 文件中初始化视频播放器：
-- -------------------- ---- -------
------ ------- ---- -----------
--- ------ - ------------------- -
--------- ----- ---------
------ ---- ------
------- ---- ------
-- ---------------- --- -----
---------- --------- -------
-------- --
---- ----------------------------------------------------------- -- ----
----- ----------------------- -- ----
--
-- -----------
---------------------------
---至此，我们已经成功的使用了 videojs-contrib-hls-webpack，可以播放 HLS 格式的视频啦！
深入理解
在使用 videojs-contrib-hls-webpack 时，我们需要了解一些基本的概念：
HLS
HLS 是指 HTTP Live Streaming，即标准的 HTTP 流媒体协议。HLS 流媒体协议是苹果公司推出的一种协议，并且已经成为 Android、iOS 等移动设备上的标准协议。
hls.js
hls.js 是一种能够在支持 HTML5 的设备上，通过 JS 代码来实现播放 HTTP LIve Streaming (HLS) 视频的技术。
我们在初始化视频播放器时，指定了播放源的类型为 hls，这就是使用 hls.js 播放 HLS 视频的其中一种方式。
video.js
video.js 是一种开源的 HTML5 视频播放器库。这个库可以让我们开发具有统一用户接口的定制化的视屏播放器。video.js 为我们提供了很多播放器API，同时还可以自定义皮肤、插件等等。
在使用 videojs-contrib-hls-webpack 时，我们就使用了 video.js 提供的 API 完成播放 HLS 视频的操作。
结语
videojs-contrib-hls-webpack 是一个使用便捷的 npm 包，可以让我们在前端应用中快速集成 HLS 视频播放功能。通过本文，相信读者已经可以了解 videojs-contrib-hls-webpack 的基本使用方法和一些相关概念了。希望本文能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568b981e8991b448e4861