HTML5 Video 添加字幕，操作简单，不需要剪辑

最新推荐文章于 2024-05-31 22:20:16 发布

卡洛背心

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量4.8k

点赞数 4

分类专栏：数据处理文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42321819/article/details/112442773

版权

数据处理专栏收录该内容

25 篇文章 4 订阅

订阅专栏

HTML5 Video视频支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。

使用很简单，用一个<track>元素即可，例如：

官方文档：https://w3c.github.io/webvtt/

效果如下：
** 在这里插入图片描述
**

<video id="video">
    <source src="example.mp4" type="video/mp4">
    <track src="example.vtt" default>
</video>

.vtt 文件的MIME type是 text/vtt。在Chrome和safari浏览器下，.vtt字幕是可以无障碍加载显示的。

通常我们保存在电脑中的外挂字幕都不是 vtt 而是，常见的如 srt 格式，需要需要用在web中，可以使用工具进行转换：Simple SubRip to WebVTT converter

对于<track>元素完整的写法应该是：

<track src="example.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>

属性：

kind：默认值是subtitles
label：点击按钮选择字幕的标题
srclang：VTT文本信息使用的语言。
例如，中文zh，英文en
default：default指的是默认会显示的字幕
例如两个<track>元素，如果都没有default属性，那都不显示，需要用户手动调出。另外，default只能出现在一个<track>元素上。

样式：

CSS中有专门的伪元素::cue可以控制字幕的样式

可以控制的CSS属性包括：

color
opacity
visibility
text-decoration及相关属性
text-shadow
background及相关属性o
utline及相关属性
font及相关属性，包括line-height
white-space
text-combine-upright
ruby-position

eg:

::cue {
    background: none;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: medium;
}

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
</head>
<style>
  ::cue {
    background: none;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: 16px;
  }
</style>

<body>
  <div id="main">
    <h1>HTML5 video视频track加载WebVtt字幕实例</h1>
    <div id="body">
      <div id="effect" class="part">
        <h3>效果：</h3>
        <div class="show">
          <div class="demo">
            <video id="video" width="320" height="600" autoplay autobuffer controls>
              <source src="./sing-song.mp4" type="video/mp4">
              <track src="./sing-song.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>
              <track src="./sing-song_fix.vtt" kind="subtitles" label="中文字幕（修正）" srclang="zh">
            </video>
          </div>
        </div>
      </div>
</body>

</html>

.vtt文件如下

WEBVTT

00:00:00.001 --> 00:00:01.000
请把你的锅

00:00:01.001 --> 00:00:03.500
带回你的虾

00:00:03.501 --> 00:00:07.000
请把你的微笑留下……

00:00:07.501 --> 00:00:10.000
请把你的锅

00:00:10.001 --> 00:00:12.000
带回你的虾

00:00:12.001 --> 00:00:15.000
请把你的微笑留下

卡洛背心

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
7
评论
HTML5 Video 添加字幕，操作简单，不需要剪辑

HTML5 Video视频支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。使用很简单，用一个<track>元素即可，例如：官方文档：https://w3c.github.io/webvtt/效果如下：****<video id="video"> <source src="example.mp4" type="video/mp4"> <track src="example.vtt" default>&
复制链接

扫一扫

专栏目录