如何使用 Video.js 为视频添加字幕?
在本教程中，我们将学习如何使用 video.js 库为视频添加字幕。字幕，通常称为 captions，是出现在视频底部的对话或其他文本。为视频添加字幕确实能提升听障人士的观看体验。
使用 video.js 添加字幕非常简单，而且 video.js 支持跨浏览器实现字幕。
在视频的下一部分中，我们将学习如何使用 video.js 为视频添加字幕。
如何使用 Video.js 在视频中添加字幕?
字幕，也称为文本轨道，是一项 HTML5 功能，允许用户查看时间触发的文本。
注意 要创建定时文本轨道或字幕文件，您需要一个 webVTT 格式的文本文件。通常，这些文件包含具有特定开始时间和结束时间的文本行。准备好视频的字幕文件后，即可将其添加到视频播放器。
为了向 video.js 播放器添加时间触发的文本轨道，我们将使用 <track> 标签。此标签也将是 <video> 元素的子元素，就像 <source> 标签一样。
示例
使用以下代码向视频播放器添加文本轨道 -
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://www.cainiaomax.com/videos/captions.vtt" srclang="en" label="English" default > </video> <script src="https://www.cainiaomax.com/videos/video1.mp4"></script> </body> </html>
在上面的代码片段中，我们使用 <video-js> 类创建了一个 <video> 元素。然后，我们在 <source> 标签中添加了视频的路径。
在其下方，我们使用了 <track> 标签，其 'kind' 设置为 'subtitles'，用于导入字幕文件。该轨道的源语言 (srclang) 为英语 (en)，因此该字幕或音轨的标签将为"English"。最后，我们为轨道添加了 'default' 属性，这将确保在使用多个文本轨道时默认选择该字幕。请务必使用字幕文件的路径更新 'src' 属性。
既然我们已经了解了如何使用轨道向视频播放器添加字幕，现在让我们来看看 <track> 的一些重要属性。标签。
kind− 此标签指定文本轨道的类型。支持的类型包括字幕、标题、章节、描述、元数据等。字幕和副标题的区别在于，字幕是视频中对话的翻译，而标题是同一对话的转录。
label− 此标签用于指定最终用户可见的文本轨道的名称。如果您有多个文本轨道，则可以为每个文本轨道添加不同的标签。
default − default 属性用于选择在有多个字幕可用时向用户显示的默认轨道。
现在我们已经了解了如何向视频播放器添加字幕文件，让我们看一个如何在视频播放器中添加多个字幕轨道的示例。
示例
请考虑以下添加多个字幕轨道的示例 −
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://www.cainiaomax.com/videos/captions.vtt" srclang="en" label="English" default > <track kind="subtitles" src="https://www.cainiaomax.com/videos/captionsSpa.vtt" srclang="es" label="Spanish" > <track kind="subtitles" src="https://www.cainiaomax.com/videos/captionsFre.vtt" srclang="fr" label="French" > </video> <script src="https://www.cainiaomax.com/videos/video1.mp4"></script> </body> </html>
在上面的示例中，您可以看到我们添加了三个字幕文件——英语、西班牙语和法语。这三个轨道都有各自的标签和文件路径。"srclang"属性中已指定每个轨道的语言。
执行上述代码后，网页将出现一个视频播放器，其中包含三个字幕轨道，分别标记为英语(默认选择)、西班牙语和法语。
或者，我们也可以通过在 <script> 标签中将字幕轨道传入 video.js 播放器选项，以编程方式添加它们。
var player = videojs('my-video', { tracks: [{ src: 'https://domain/mysub.vtt', kind:'subtitles', srclang: 'en', label: 'English' }] });
在上面的代码片段中，我们在 track 属性中为 video.js 播放器函数添加了一个字幕轨道。track 属性的属性(kind、src、srclang、label)与之前完全相同。
多个字幕轨道
您可能已经注意到，track 属性是数组类型，这意味着您可以将多个字幕轨道传递给此属性。每个字幕轨道都是一个具有特定属性的 JS 对象。请考虑以下代码，以编程方式添加多个文本轨道。
示例
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://www.cainiaomax.com/videos/video1.mp4"> </script> <script> var player = videojs('my-video', { tracks: [{ src: 'https://www.cainiaomax.com/videos/captionsEng.vtt', kind:'subtitles', srclang: 'en', label: 'English' },{ src: 'https://www.cainiaomax.com/videos/captionsSpa.vtt', kind:'subtitles', srclang: 'es', label: 'Spanish' }, { src: 'https://www.cainiaomax.com/videos/captionsFre.vtt', kind:'subtitles', srclang: 'fr', label: 'French' }] }); </script> </body> </html>
执行上述代码后，网页中将创建一个视频播放器，其中包含 3 个字幕轨道，分别标记为英语、西班牙语和法语。
注意- 请务必使用您的视频和字幕文件更新视频和字幕轨道的源代码。
结论
在本教程中，我们学习了如何使用 video.js 为创建的视频添加字幕轨道。我们还学习了为视频添加字幕文本轨道的方法——使用 <track> 标签，以及在 <script> 标签内以编程方式添加字幕文本轨道，并参考了相应的 HTML 代码示例。
