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>
</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文件如下

WEBVTT00: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
请把你的微笑留下

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

HTML5 video视频字幕的使用和制作
首先先看一下原生HTML5 video对字幕的支持显示情况: 元素 HTML5允许我们使用元素为视频指定字幕.这个元素的各种属性允许我们指定这样的东西,比如我们添加的内容的类型,它所在的语言,当然还有 ...
分享添加字幕最简单的方法视频制作超简单
字幕是一个视频或电影组成中相当重要的一部分,方便了我们更容易看懂视频以及视频想要表达的意思,但是很多新手小白在添加字幕时常常耗时耗力,小编今天分享一个添加字幕的方法,感兴趣的朋友一起来看看吧! 第一步 ...
怎样在视频添加字幕? 很简单3步曲.
如何在视频添加字幕? 现在,视频文件的制作者都比较钟爱为自己制作的视频文件添加上字幕,那么字幕该如何加呢? 第一步: 首先我们先对smartmovie PC端软件进行一下相应的设置.打开参数选择,此时 ...
视频剪辑器都有哪些？分享几种操作简单的视频剪辑工具
通过剪辑视频,可以将视频中的无用镜头和重复内容去掉,使得视频更加紧凑,节奏更加流畅,提高观看体验.在现今的快节奏社会,观众对于时间的精打细算,因此,视频的剪辑显得尤为重要.如果视频过于冗长,观众会感到 ...
html video添加字幕,HTML5标签：video元素的使用方法及作用
html元素标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关标签的使用方法及作用详解如下: 标签的定义标签可以把指定的视频资源文件插入页面中播放: 标签是 HTML 5 中新增的 ...
微信小程序怎么字体鼠标放上去变颜色?_PR视频怎么用，Arctime字幕软件添加字幕，双语字幕怎么添加？...
一个喜欢分享干货的大叔. 每天学一个剪辑技巧,萌新也能变大佬,大家好我是小林干货文章来了,推荐收藏起来. 今天这篇文章呢,教大家. 1.PR视频怎么用Arctime字幕软件添加字幕?2.双语字幕怎么添 ...
微课制作教程08：如何给微课视频添加字幕？
字幕可以让学习者更清晰的了解课程内容,在精品微课中,是必不可少的内容.CourseMaker添加字幕很简单,所见即所得有两点需要注意: 1.从菜单上方,"编辑"--"字 ...
简单实用的添加字幕及去水印的方法及操作步骤
去除水印和添加字幕是经常要用到的一些功能.现在一起来看看简单实用的批量去除水印和加字幕功能怎么操作. 我们先看一下视频是有水印的而且并没有什么字幕的百度搜索"视频剪辑高手"软件并 ...
HTML5 ＜track＞给视音频添加字幕
灵感来源:https://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/ HTML5 可以用 <track&g ...

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

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

最新文章

热门文章