怎样给HTML5的Video标签设置字母文件

编辑：QTOOL.NET日期：2019-07-04155

随着时代的发展，浏览器基本上都能支持HTML5了，一般我们都知道设置视频的使用自带的video来加载视频，但对于字幕一般都不怎么设置，那么怎样给video标签设置字幕且不适用js呢？

代码如下：

</video>

这里可以通过使用<track>标签来指定了视频字幕文件，同时，也可以设置多个字幕文件用来选择自由切换。

一般html5在大部分浏览器中支持WebVTT与TTML两种格式的字幕.

WebVTT为Web视频文本轨道，它是以UTF-8编码格式的文本文件

示例如下：

WEBVTT

00:00:00.867 --> 00:00:03.332

这是一段字幕呀呀，

00:00:06.607 --> 00:00:17.185

这是第二个字母呀呀，

字幕设置规则

其中第一行必需要加上WEBVTT，然后空行，然后下面一行是字幕的时间范围可设置一行或多行字幕的内容然后继续空行.....依次类推即可.....

字幕时间的格式为时:分:秒.毫秒，第一个参数为开始时间,第二个参数为结束时间

TTML为时序文本标记语言

其中TTML是xml格式

示例代码如下：

<?xml version='1.0' encoding='UTF-8'?>

<body>

<div>

<p begin="00:00:00.769" end="00:00:03.178" >这是新的一句字幕，</p>

<p begin="00:00:02.305" end="00:00:15.358" >新的字幕内容二，<br/>字幕内容3。</p>

</div>

</body>

</tt>

其中p标签的begin与end属性是设置字幕的开始与结束时间。

在html5中，通过在video标签中使用track标签可定义字幕内容类型有五种,src设置字幕地址，label切换字幕时显示的名称以及default指定默认字幕,还可以用来设置一个或者多个字幕文件。

TAG标签：html5

此文章由QTOOL.NET编辑