video 字幕texttrack属性的应用

定义和用法

addTextTrack() 方法创建和返回新的文本轨道。

新的 TextTrack 对象会被添加到视频/音频元素的文本轨道列表中。

语法

audio|video.addTextTrack(kind,label,language)

参数

image.png

展示效果

image.png

文本形式添加

以文本的形式添加：

  <video id="video1" controls src="./video/friday.mp4">
    <track default kind="captions" srclang="zh-cn" src="./video/friday.1.vtt"/>
  </video>

可以设置字幕样式

video::cue {
     background-image: linear-gradient(to bottom, dimgray, lightgray);
     color: papayawhip;
   }
   video::cue(b) {
     color: peachpuff;
   }

而文件里面的内容：

WEBVTT

00:00:00.000 --> 00:00:00.999  line:80%
hi aimee!

00:00:01.000 --> 00:00:01.499 line:80%
你好吗?

00:00:01.500 --> 00:00:02.999 line:80%
大佬心情不好吗?

00:00:03.000 --> 00:00:04.299 line:80%
是的，他心情不好

00:00:04.300 --> 00:00:06.000 line:80%
一定是有人惹他生气了

动态添加字幕

另外一种动态添加字幕模式：
首先，video标签

<video id="video1" controls src="./video/friday.mp4">

获取video dom ，添加文本轨道

myVid=document.getElementById("video1");     
var subtitles = myVid.addTextTrack("subtitles", 'text','en');

设置文本标签的属性：

subtitles.mode = 'showing'

将对应的字幕文本添加到文本轨道

var titles = [
        {
          begintime: 0,
          endtime:0.999,
          text: 'aimee!'
        },
        {
          begintime: 1,
          endtime:1.499,
          text: 'How are you?'
        },
        {
          begintime: 1.5,
          endtime:2.999,
          text: 'Tell me, is the lord of the universe in?'
        },
        {
          begintime: 3,
          endtime:4.299,
          text: "Yes, he's in - in a bad humor"
        },
        {
          begintime: 4.3,
          endtime: 6,
          text: "Somebody must've stolen the crown jewels"
        }
      ]
      for (var i = 0; i< titles.length; i++){
        var item = titles[i]
        var cue = new VTTCue(item.begintime, item.endtime, item.text);
        cue.line = 80
        subtitles.addCue(cue);
      }

这样在视频播放的时候就能正常展示对应的字幕。

扩展

从上述的字幕添加的必要属性中可以看出，需要开始时间、结束时间、以及展示的内容 这样就是一条字幕，在视频播放过程中，会根据对应的时间添加到现有展示队列中，到结束时间则移除，同时有一个oncuechange事件来监听每段字幕的添加和移除。
知道上述属性后，我们可以利用该属性做一些类似字幕触发的事情，比如在某些时间段处理某些交互事情。

具体如下

var events = [
          {
            "category": 2,
            "begintime": 1,
            "id": "139127",
            "name": '事件1'
          },
          {
            "category": 1,
            "begintime": 661,
            "endtime": 783,
            "id": "433324",
            "name": '事件2',
            "date": "2019-05-12",
            "timer": 120,
            "type": "1",
            "content": "https://hw.xesimg.com/2019/05/12/15576457373351jpg",
            "audio": "",
            "answer": "A",
            "status": 0
          },
          {
            "category": 1,
            "begintime": 1084,
            "endtime": 1211,
            "id": "433325",
            "name": '事件3',
            "date": "2019-05-12",
            "timer": 120,
            "type": "1",
            "content": "https://hw.xesimg.com/2019/05/12/15576457594631jpg",
            "audio": "",
            "answer": "B",
            "status": 0
          },
          {
            "category": 2,
            "begintime": 3539,
            "id": "139130",
            "name": '事件4',
          }
        ]
      myVid=document.getElementById("video1");      
      var subtitles = myVid.addTextTrack("subtitles", 'text','en');
      for(var i=0;i<events.length;i++){
        var item = events[i]
        if(!item.endtime){
          item.endtime = item.begintime+1
        }
        // subtitles.mode = 'showing' // 默认为隐藏不展示状态
        subtitles.addCue(new VTTCue(item.begintime, item.endtime, JSON.stringify(events[i])));
      }
     console.log(myVid.textTracks)
      
      subtitles.oncuechange=function(text){
        console.log('change',text)
        console.log('activeCues', this.activeCues)
        if(this.activeCues.length>0){
          var tmpevent = JSON.parse(this.activeCues[0].text);
          console.log('添加-----tmpevent', tmpevent)
        } else {
          console.log('移除')
        }
      } 

字幕属性还有很多其他的属性值，可以参考https://developer.mozilla.org/en-US/docs/Web/API/TextTrack