HTML5 video视頻字幕的应用和制做方式

日期:2021-02-26 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

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被授予1个值subtitles,表明文档包括的內容的种类
  • label被授予1个值,标示该字幕集所用的語言 - 比如English或Deutsch- 这些标识将出現在客户页面中,以容许客户非常容易地挑选她们要想看到的字幕語言。
  • src 在每种状况下都会分派1个指向有关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>9幽阴灵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
3生7世5555

字幕css款式设定

::cue伪元件的重要是靶向某些文字路轨案件线索用于定型的,由于它的任何限制球杆配对。仅有极少数CSS特性能够运用于文字提醒:

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background 速记忆力能
  • outline 速记忆力能
  • font 速记特性
  • line-height
  • white-space

==留意::: cue的案件线索款式现阶段可用于Chrome,Opera和Safari,但并未在Firefox上应用。==

WebVTT还适用1些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+字幕是开启的,而且默认设置控制包括1个按钮和1个菜单,该菜单出示与大家不久搭建的菜单同样的作用。该default特性也受适用。

==留意:除非您界定MIME种类,不然IE将彻底忽视WebVTT文档。这能够根据将.htaccess文档加上到包括的相应文件目录轻轻松松进行AddType text/vtt .vtt==

iPhone访问器

Safari 6.1+对Internet Explorer 10+具备相近适用,显示信息带有不一样能用选项的菜单,并提升了1个“全自动”选项,容许访问器开展挑选。

Chrome和Opera

这些访问器也是有相近的完成:默认设置状况下,字幕是开启的,默认设置操纵集包括1个'cc'按钮,能够开启和关掉字幕。Chrome和Opera忽视元素default上的特性, 而是尝试将访问器的語言与字幕的語言相配对

总结

以上所述是网编给大伙儿详细介绍的HTML5 video视頻字幕的应用和制做方式,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:HTML5 Canvas绘图圆点虚线案例 返回下一篇:没有了