开发视频类APP的公司怎样解决带字幕的视频?深圳APP开发公司本例将给各位介绍的是在HTML5视频中添加字幕。听起来这像是一项非常复杂的工作，不过HTML5已经将字幕文件进行抽象独立，同时非常简单的就能在任意视频中添加字幕。本节示例不能直接用浏览器打开文件，否则Chrome下会报出“Cross-origintexttrackloaddeniedbyCross-OriginResourceSharingpolicy.”的错误信息，表示字幕文件加载违反了跨域资源共享策略。
所以，需要将文件部署在Web服务器上，如Apache、Nginx、IIS等。部署完毕后，用Chrome打开对应网址，点击屏幕中央的三角播放按钮，视频的下方出现字幕，效果如图3.10所示。
点击播放按钮，视频下方出现字幕本例的代码构建在“3-7.处理带字幕的视频.html”的基础上，没有额外的脚本改动。在HTML中增加字幕结构，代码如下：
< video width=" 480" height=" 320" controls poster="../ images/ BigBuck. png" preload=" none"> < source src="../ res/ BigBuck. webm" type=" video/ mp4"> < track label=" English subtitles" kind=" captions" srclang=" en" src="../ res/ BigBuck. vtt" default> </ vidde>
所以，需要将文件部署在Web服务器上，如Apache、Nginx、IIS等。部署完毕后，用Chrome打开对应网址，点击屏幕中央的三角播放按钮，视频的下方出现字幕，效果如图3.10所示。
点击播放按钮，视频下方出现字幕本例的代码构建在“3-7.处理带字幕的视频.html”的基础上，没有额外的脚本改动。在HTML中增加字幕结构，代码如下：< video width=" 480" height=" 320" controls poster="../ images/ BigBuck. png" preload=" none"> < source src="../ res/ BigBuck. webm" type=" video/ mp4"> < track label=" English subtitles" kind=" captions" srclang=" en" src="../ res/ BigBuck. vtt" default> </ vidde>
track标签为视频规定外部文本轨道，标签带有多种新属性，具体如下：
default：表示该轨道是默认的。
kind：表示轨道文本类型，如：captions、chapters、descriptions、metadata、subtitles。
label：轨道的标签或标题。
src：轨道的URL。
srclang：轨道的语言，若kind属性值是“subtitle”，则该属性是必需的。本例track标签的轨道文件为1个WebVTT文件。WebVTT文件是一个简单的纯文本，打开“../res/BigBuck.vtt”，代码如下：
WEBVTT // 文本 轨道 文件 开头， 必 填 00: 00. 000 --> 00: 01. 000 < c> 字幕 出现--- 1</ c> // 表示 可 以带 CSS 的 文本 00: 01. 000 --> 00: 02. 000 < i> 字幕 出现--- 2</ i> // 斜体 文本 00: 02. 000 --> 00: 03. 000 < b> 字幕 出现--- 3</ b> // 粗体 文本 00: 03. 000 --> 00: 04. 000 < u> 字幕 出现--- 4</ u> // 带下 划线 文本 00: 04. 000 --> 00: 05. 000 < v. loud> 字幕 出现--- 5 // 声音 文本 加 样式 00: 05. 000 --> 00: 06. 000 < v Man> 字幕 出现--- 6 // 声音 文本 加 人物 名
default：表示该轨道是默认的。
kind：表示轨道文本类型，如：captions、chapters、descriptions、metadata、subtitles。
label：轨道的标签或标题。
src：轨道的URL。
srclang：轨道的语言，若kind属性值是“subtitle”，则该属性是必需的。本例track标签的轨道文件为1个WebVTT文件。WebVTT文件是一个简单的纯文本，打开“../res/BigBuck.vtt”，代码如下：
WEBVTT // 文本 轨道 文件 开头， 必 填 00: 00. 000 --> 00: 01. 000 < c> 字幕 出现--- 1</ c> // 表示 可 以带 CSS 的 文本 00: 01. 000 --> 00: 02. 000 < i> 字幕 出现--- 2</ i> // 斜体 文本 00: 02. 000 --> 00: 03. 000 < b> 字幕 出现--- 3</ b> // 粗体 文本 00: 03. 000 --> 00: 04. 000 < u> 字幕 出现--- 4</ u> // 带下 划线 文本 00: 04. 000 --> 00: 05. 000 < v. loud> 字幕 出现--- 5 // 声音 文本 加 样式 00: 05. 000 --> 00: 06. 000 < v Man> 字幕 出现--- 6 // 声音 文本 加 人物 名
在WebVTT文本中，所有c标签都可以带CSS样式，比如<c.demoClass>。还有一种v标签，也可以带样式，同时还可以加入人名。本例给v标签加上2种样式类，如下代码所示：::cue(. loud) { font- size: 2em; color: Red;} ::cue( v[ voice=" Man"]) { color: green
该类声音文本样式需要以字符串“::cue”开头，cue表示指定文本和视频文件中字幕的时间定位。小括号中间的内容如同CSS，表示选择器的名称。其中的“.load”如同一般CSS，表示文本中的样式类。其中，“v[voice="Man"]”表示对应人物音轨文字的样式类。
深圳APP开发公司小结本章主要介绍了使用HTML5多媒体特性，包括音频与视频设计，并通过多个实际范例介绍了如何使用HTML5多媒体特性。本章需要APP开发公司的程序员了解的虽然仅仅只有两个标签audio和video，但它们延伸出来的技术却不是新手可以轻松掌握的，希望读者能多多练习，直到理解了每种方法背后的含义。博纳网络编辑整理。
当前文章链接：/construction/appkaifa/3086.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
