HTML5 video视频字幕的运用和制作办法
HTML5同意我们使用 元素为视频指定字幕。这个元素的各种属性同意我们指定这样的东西,比方我们增加的内容的类型,它所在的说话,当然还有对包括实际字幕信息的文本文件的援用。
<video id="video" controls> <source src="./step.mp4" type="video/mp4"> <track label="中文字幕" kind="subtitles" chapters metadata srclang="zh" src="./caption.vtt" default> <track label="ABC" kind="subtitles" srclang="de" src="./caption1.vtt"> <track label="Number" kind="subtitles" srclang="es" src="./caption2.vtt"> </video>
track的属性介绍:
kind被给予一个值subtitles,表示文件包括的内容的类型
label被给予一个值,指示该字幕集所用的说话 - 例如English或Deutsch- 这些标签将显现在会员界面中,以同意会员容易地选中他们想要看到的字幕说话。
src 在每种状况下都会分配一个指向相关WebVTT字幕文件的有效URL。
srclang 指示每个字幕文件的内容所在的说话。
该default属性在英语 元素上设定,向阅读器表白这是默许的字幕文件定义,当字幕翻开并且会员没有做出特定选中时使用。
WebVTT 字幕文件
包括实际字幕数据的文件是遵照指定格局的简便文本文件,在这种状况下是Web视频文本轨道(WebVTT)格局。该==WebVTT插入标准仍在开发中==,但它的==主要部分是不乱的==,所以我们今天可以使用它。
视频供给商(如Blender Foundation)以其视频的文本格局供给字幕和副标题,但平常采纳SubRip Text(SRT)格局。可以使用在线转换器(如srt2vtt)将这些转换为WebVTT。
文件格局标准:
文件的后缀名为 ==.vtt==
==.vtt==文件的MIME type是text/vtt
在Chrome和Firefox阅读器下,.vtt字幕是可以无障碍加载显示的,但是关于IE10+阅读器,虽然也支撑.vtt字幕,但是却需要定义MIME type,不然会疏忽WebVTT格局。比力简便方式就是在字幕所在文件夹下面增加个.htaccess文件,里面写上AddType text/vtt .vtt。
//文件开头下必需先声明 ==WEBVTT==
WEBVTT
// 起始时间 --> 完毕时间,单位为毫秒
00:00:00.001 --> 00:00:03.000
// 对应上面的时间显示字幕,可以独自设定样式,aa相似class类名
<v aa>九幽阴灵1111</v>
00:00:03.001 --> 00:00:06.000
<v bb>诸天神魔2222</v>
00:00:06.001 --> 00:00:09.000
以我血躯3333
00:00:09.001 --> 00:00:12.000
奉为牺牲4444
00:00:12.001 --> 00:00:15.000
三生七世5555
字幕css样式设定
::cue伪元件的关键是靶向一般文本轨道线索用于定型的,由于它的任何限制球杆匹配。只要少数CSS属性可以利用于文本提醒:
color
opacity
visibility
text-decoration
text-shadow
background 速记机能
outline 速记机能
font 速记属性
line-height
white-space
==留意::: cue的线索样式当前适用于Chrome,Opera和Safari,但尚未在Firefox上使用。==
WebVTT还支撑一些HTML标签停止样式操纵,常见的有声音 ==v== 标签,色彩 ==c== 标签,加粗==b==标签,倾歪==i==标签,下划线==u==标签,还有==ruby==和==lang==标签等。
//设定字幕的样式 video::cue{ background-color:transparent; color:white; font-size:20px; line-height: 100px; } // 设定单行字幕的样式 video::cue(v[voice=aa]){ color:green; } video::cue(v[voice=bb]){ color:rgb(0, 26, 128); }
阅读器兼容
IE
默许状况下,Internet Explorer 10+字幕是启用的,并且默许控件包括一个按钮和一个菜单,该菜单供给与我们刚刚构建的菜单雷同的功效。该default属性也受支撑。
==留意:除非您定义MIME类型,不然IE将完全忽略WebVTT文件。这可以通过将.htaccess文件增加到包括的响应名目轻松完成AddType text/vtt .vtt==
iphone阅读器
Safari 6.1+对Internet Explorer 10+具有相似支撑,显示带有不一样可用选项的菜单,并增添了一个“主动”选项,同意阅读器停止选中。
Chrome和Opera
这些阅读器也有相似的实现:默许状况下,字幕是启用的,默许操纵集包括一个'cc'按钮,可以翻开和关闭字幕。Chrome和Opera忽略元素default上的属性, 而是尝试将阅读器的说话与字幕的说话相匹配
以上就是HTML5 video视频字幕的使用和制作办法的具体内容,更多请关注百分百源码网其它相关文章!