video 播放字幕，解决hls导致的字幕播放问题

ringlot

已于 2023-12-18 15:12:14 修改

阅读量436

点赞数

文章标签： html5 音视频

于 2023-12-18 14:41:54 首次发布

本文链接：https://blog.csdn.net/ringlot/article/details/135061338

版权

video 播放字幕的方法是播放字幕webvtt文件，video 原生自带播放功能, 只需要加<track></track>标签。

king: 标识播放内容类型, 这里如果是 captions 的话 video 会自动显示字幕文本内容。如果是metadata，会当作媒体文件类型，不会显示字幕文本，需要用js去捕捉texttarck获取文本

<video
      id="video1"
      width="100%"
      height="100%"
      controls
      autoplay
      muted
      src="https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4"
    >
      <track kind="captions" default src="https://s-sh-17-dplayercdn.oss.dogecdn.com/hikarunara.vtt"></track>
      暂无视频
    </video>

我这边用的是metadata，原因是需要统一字幕的样式，位置，大小等，用到的方法是获取textTrack，trak的oncuechange 方法

if (this.video.textTracks && this.video.textTracks[0]) {
            const track = this.video.textTracks[0];
            track.mode = "showing";
            track.oncuechange = () => {
                const cue = track.activeCues[0];
                this.container.innerHTML = '';
                if (cue) {
                    const template = document.createElement('div');
                    template.appendChild(cue.getCueAsHTML());
                    const trackHtml = template.innerHTML
                        .split(/\r?\n/)
                        .map((item) => `<p>${item}</p>`)
                        .join('');
                    this.container.innerHTML = trackHtml;
                }
               
            };
        }

碰到的问题是：之前播放m3u8的文件并播放字幕是没问题，也可以监听到字幕的播放，但是后面不行了，研究调查发现是因为更新了hls 版本导致，hls 是1.4.0版本，阻止了原生的video 字幕播放导致播不出来，看了下hls的代码，他内部也有subtitle字幕的播放，由于video的textTrack 的mode 没有设置当前播放的导致被hls内部的subtitle给覆盖了，所以只要设置当前的track.mode=showing, 即可解决

即使kind = captions, 也需要在video初始化后去设置track.mode=showing

 const video = document.getElementById("video1")
     if (video.textTracks && video.textTracks[0]) {
        const track = video.textTracks[0]
         track.mode = "showing"

        // track.oncuechange= () =>{
        //   const cue = track.activeCues[0]
        //   console.log(cue.text)
        // }
      }