视频文件添加字幕

原创已于 2022-11-22 17:23:15 修改 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-11-22 17:20:22 首次发布

起因：最近看了下mdn的video文章，看到一个有趣的知识点，居然可以自己手动给视频添加字幕

先上代码：

<body>
    <figure id="videoContainer" data-fullscreen="false">
    <video id="video" controls preload="metadata">
      <source src="./sintel-short.mp4" type="video/mp4"></source>
      <track label="Chinese" kind="subtitles" srclang="en" src="./cn.vtt" >
      <track label="English" kind="subtitles" srclang="en" src="./en.vtt" >
    </video>
  </figure>
  <button id="cn">仅中文</button>
  <button id="en">仅英文</button>
  <button id="double">双语</button>
    <script>
		var video = document.getElementById('video');
    console.log('video: ', video.textTracks);
    for (let index = 0; index < video.textTracks.length; index++) {
      const element = video.textTracks[index];
      element.mode='showing'
    }
    let cn = document.getElementById('cn')
    let en = document.getElementById('en')
    let double = document.getElementById('double')
    cn.addEventListener('click',()=>{
      video.textTracks[0].mode = 'showing'
      video.textTracks[1].mode = 'hidden'
    })
    en.addEventListener('click',()=>{
      video.textTracks[0].mode = 'hidden'
      video.textTracks[1].mode = 'showing'
    })
    double.addEventListener('click',()=>{
      for (let index = 0; index < video.textTracks.length; index++) {
      const element = video.textTracks[index];
      element.mode='showing'
    }
    })
    </script>
  </body>

主要依据的是video属性来的。

.vtt文件，可以有专门的网站转换字幕，这里我直接拿的官网文件