数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用Video.js在视频中添加字幕？
在本教程中，我们将学习如何使用video.js库向视频添加字幕。字幕，通常称为隐藏式字幕，是在视频底部显示的语音或其他文本行。向视频添加字幕可以真正增强听力障碍或听力受损观众的观看体验。
使用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://tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://tutorialspoint.com/videos/captions.vtt" srclang="en" label="English" default > </video> <script src="https://tutorialspoint.com/videos/video1.mp4"></script> </body> </html>
在上面的代码片段中，我们使用<video-js>类创建了一个<video>元素。然后，我们在<source>标签中添加了视频的路径。
在其下方，<track>标签的“kind”属性设置为“subtitles”用于导入字幕文件。轨道的源语言（srclang）为英语（en），此字幕或音频轨道的标签将为“英语”。最后，将“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://tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > <track kind="subtitles" src="https://tutorialspoint.com/videos/captions.vtt" srclang="en" label="English" default > <track kind="subtitles" src="https://tutorialspoint.com/videos/captionsSpa.vtt" srclang="es" label="Spanish" > <track kind="subtitles" src="https://tutorialspoint.com/videos/captionsFre.vtt" srclang="fr" label="French" > </video> <script src="https://tutorialspoint.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://tutorialspoint.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video> <script src="https://tutorialspoint.com/videos/video1.mp4"> </script> <script> var player = videojs('my-video', { tracks: [{ src: 'https://tutorialspoint.com/videos/captionsEng.vtt', kind:'subtitles', srclang: 'en', label: 'English' },{ src: 'https://tutorialspoint.com/videos/captionsSpa.vtt', kind:'subtitles', srclang: 'es', label: 'Spanish' }, { src: 'https://tutorialspoint.com/videos/captionsFre.vtt', kind:'subtitles', srclang: 'fr', label: 'French' }] }); </script> </body> </html>
执行以上代码时，将在网页中创建一个视频播放器，该播放器分别带有3个标记为英语、西班牙语和法语的字幕轨道。
注意− 请确保使用您的视频和字幕文件更新视频和字幕轨道的源。
结论
在本教程中，我们学习了如何将字幕轨道添加到使用video.js创建的视频中。我们还了解了向视频添加字幕文本轨道的方法：使用<track>标签和在<script>标签内以编程方式，并结合每个方法的工作HTML代码示例。
4K+ 次观看
