什么是 videojs-vtt.js？
videojs-vtt.js 是基于 HTML5 video 标签的一个 npm 包, 它可以很方便地将 .vtt 格式的视频字幕（同一个视频时刻点的文字呈现）与视频进行交互效果的展示，支持自定义字体颜色、大小、边框等等，并且支持本地化语言选项。
安装
首先，创建并进入您的项目文件夹，然后启动终端（也可以使用命令行界面）。
如果您没有安装 Node.js 和 npm，就请点击 这里 安装。
接下来，使用以下 npm 命令安装 videojs-vtt：
npm install videojs-vtt --save
- 引入video.js & videojs-vtt.js
它们均可在 CDN 服务器上下载并引入到您的网站或项目文件夹下。
<head> <link href="//vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" /> <script src="//vjs.zencdn.net/7.15.4/video.js"></script> <script src="//unpkg.com/videojs-vtt@latest/dist/videojs-vtt.min.js"></script> </head>
用法
接下来，我们将通过一个示例来掌握 videojs-vtt 的使用方法。
-- -------------------- ---- -------
--------- -----
------
------
----- ------------------------------------------- ---------------- --
------- ------------------------------------------------
------- ----------------------------------------------------------------------
-------
------
------ ------------------ --------------- ----------------- -------- -------------- ----------- ------------ -------------------- --------
------- ------------------ ----------------- --
------ --------------- ----------------- ------------ --------------- ------- --
--------
--------
--- ------ - -------------------------
------------
---------------- -----
----- -
--- -
------------------ ------- ------- ---- --------
-
--
-------------- -
------- -----
---------- -
--------- -------- ----------------------- ------------------ --------------------------
----- --------------------------------------------------------
------ ---------------- ------------ --
-----------
----- ---------- -
------ -
----- --------------------------------
--
--
-------- -
-- --------
---------------------- -
----- ----- - ----------------------
----- ------ - -----------------------------
-------------------------------- -- -- -
--------------
---
-------------------------------- -- -- -
----- ----- - ------------
-------------------------- -------
---
------------------- - -------
-
--
-------- ---------- -
----------------- -- -
----------------------------
---
-
-
-
---
-- ----------
------------------------- ------------------ -
-------------------------------------------------- --------------------- -- -
---------------- - ---------
---
---
---------
-------
-------解析
在上述代码中，我们执行了以下操作：
- 使用正确的链接导入 video.js 和 videojs-vtt.js。
- 插入包含视频以及字幕的视频标记并设置相应参数。
- 使用 vtt 方法启用 videojs-vtt.js 完成字幕渲染以及自定义字体颜色等等。
- 自定义字幕字体颜色控制，以允许视频观众更改字幕的颜色。
结论
使用 videojs-vtt.js 是一种快速的方式，如果项目需要一个可定制、可交互的字幕显示器。在本文示例中，我们演示了如何使用方法和自定义样式属性。我们鼓励使用者扩展其功能或通过本地化或其他界面元素定制其界面以满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/162712