开发者社区> slalx_1986> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

html5 video 外挂字幕[webVTT]研究

简介: html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】,是一个以.vtt结尾的纯文本文件。
+关注继续查看

html5 video 外挂字幕[webVTT]研究

目录

  1. WebVTT是什么

    • WebVTT内容
    • 设置字幕样式
    • 为字幕设置位置
    • 章节chapters解释
  2. webVTT 详解
  3. webVTT实现
  4. 浏览器行为
  5. 浏览器支持情况

WebVTT是什么

html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】,是一个以.vtt结尾的纯文本文件,里面会包含以下几种视频信息:

  1. 字幕subtitles

关于对话的转译或者翻译

  1. 标题captions

类似于标题,但是还包括音响效果和其他音频信息。

  1. 说明description

预期为一个单独的文本文件,通过屏幕阅读器描述视频

  1. 章节chapters

旨在帮助用户浏览整个视频

  1. 元数据metadata

默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。

webVTT 详解

  1. WebVTT内容

    这里有一个标准的示例:

    WEBVTT
    
    1
    00:00:13.000 --> 00:00:16.100
    I heard about this arduino project, and I saw it online - 
    
    2
    00:00:16.100 --> 00:00:20.100
    - and I said 'Wow! a lot of people are starting to talk about this.
    I should check it out!'

    webvtt文件中的每一项为一个cue,每一个cue以箭头分割的开始时间和结束时间,cue对应的文本在下一行,每一个cue可以有一个id, cue的时间格式为 hours:minutes:seconds:milliseconds,必须严格遵守,时分秒必须为两位数字,不足的以0填补,毫秒必须是三位数字,这个里有个.vtt文件的格式校验器Live WebVTT Validator

  2. 设置字幕样式

    通过内联样式为字幕设置样式

    WEBVTT
    
    1
    00:00:13.000 --> 00:00:016.100
    Ich hörte von dieser <c.red.caps>arduino</c> Projekt, und ich sah es online -
    
    2
    00:00:16.100 --> 00:00:20.100
    - und ich sagte "<b>Wow!</b> eine Menge Leute fangen an, darüber zu reden.
    Ich <i>check it out</i>!"
    
  3. 为字幕设置位置

    位置设置可以写在时间设置的同一行

    - D:vertical / D:vertical-lr
    >   垂直的显示文本而不是水平的。 它也指定文本是增长到左边( vertical)还是右侧( vertical-lr )
    -  L:X / L:X%
    >  一个数字或百分比。 如果是一个百分点,那么它指从框架顶部开始的位置。如果是一个数字,它表示会是在多少行。
    -  T:X%
    >  视频上的水平文字位置。T:100% 表示文本会放在视频的右侧。
    -  A:start / A:middle / A:end
    > 文本在盒子内的对齐方式。start是左对齐, middle是居中对齐, end是右对齐。
    - S:X%
    >  文本盒子的宽度,表示为视频宽度的百分比。
    

    具体示例

    WEBVTT
    
    00:00:05.000 --> 00:00:08.040 A:middle L:10%
    I dabble? Listen to me. What a jerk.
    
    00:00:05.000 --> 00:00:08.040 A:middle L:60%
    Yeah, I sort of dabble around,
    you know.
        
  4. 章节chapters解释

    语法跟字幕类似,如下

    chapter-1
    00:00:00.000 --> 00:00:18.000
    Introductory Titles
    
    chapter-2
    00:00:18.001 --> 00:01:10.000
    The Jack Plugs
    
    chapter-3
    00:01:10.001 --> 00:02:30.000
    Robotic Birds
    

    使用的时候是需要设置kind = 'chapter',目前主流浏览器关于chapter的支持不太完善,最好的办法采用我们自己定义的界面,一般自定义的界面需要提供一些特性:

    • 展示章节列表
    • 允许用户选择章节
    • 播放时高亮当前选择的章节

    采用如下的代码可以达到的我们的目的

    <video src="sintel.mp4">
      <track kind="chapter" 
             label="Chapters" 
             src="sintel_chapters.vtt" srclang="en"
             onload = "displayChapters(this)"></track>
    </video>
    
    function displayChapters(trackElt){
        if((trackElt) && (textTrack = trackElt.track)){
            if(textTrack.kind === "chapters"){
                // Do not show the track
                textTrack.mode = 'hidden';
                var chapterBlock = document.getElementById("chapters");
                // List cues
                for (var i = 0; i < textTrack.cues.length; ++i) {
                    var cue = textTrack.cues[i];
                    var chapterName = cue.text;
                    var start = cue.startTime;
                    // Design an interface here allowing to choose a chapter
                    ....
                }
            }
        }
    }
    

webVTT实现

在html5通过video的子元素track来实现

<video controls>
  <source src="video.mp4"  type="video/mp4">
  <source src="video.webm" type="video/webm">


  <track label="English Captions"     kind="captions"     srclang="en"
                                                          src="video_cc_en.vtt">


  <track label="German Subtitles"     kind="subtitles"    srclang="de"
                                                          src="video_sub_de.vtt">

  <track label="French Subtitles"     kind="subtitles"    srclang="fr"
                                                          src="video_sub_fr.vtt">


  <track label="English Descriptions" kind="descriptions" srclang="en"
                                                          src="video_audesc_en.vtt">


  <track label="Chapters"             kind="chapters"     srclang="en"
                                                          src="video_chapters_en.vtt">
</video>

浏览器行为

  1. 所有text track都存在与媒体元素[media element]的textTrackList属性中
  2. 播放过程中遇到一个cue就会触发cuechange和enter事件
  3. 当一个字幕会触发一个exit事件。

浏览器支持情况

track浏览器支持情况

参考

  1. The track element
  2. Web Video Text Tracks can i use?
  3. mdn track
  4. Subtitles and Chaptering using Timed Text Tracks
  5. W3C WebVTT standard: http://dev.w3.org/html5/webvtt/#webvtt-cue-timings
  6. Timed track use cases: http://wiki.whatwg.org/wiki/Timed_tracks
  7. Timed track formats: http://wiki.whatwg.org/wiki/Timed_track_formats

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Emmet —— HTML / CSS】 超实用开发技巧
【Emmet —— HTML / CSS】 超实用开发技巧
20 0
HTML+CSS项目案例(主体部分-首页(index))-1
HTML+CSS项目案例(主体部分-首页(index))
22 0
HTML+CSS项目案例(主体部分-首页(index))-2
HTML+CSS项目案例(主体部分-首页(index))
42 0
【Emmet Zen Coding——HTML / CSS】 超实用开发技巧
前端开发中 Emmet 常用开发技巧,提升开发效率
490 0
+关注
41
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载