如何在 video.js 中设置字幕

Posted 2023-05-07

【中文标题】如何在 video.js 中设置字幕

【英文标题】：How to setup subtitles in video.js

【发布时间】：2015-09-25 21:15:05

【问题描述】：

大约 3 小时前我在网上搜索，我很困惑如何在 video.js 播放器中实现字幕。

我已在我的播放器中添加<track kind="subtitles" src="http://test.to/the-longest-ride.720p.BluRay.x264.YIFY.srt" srclang="en-US" label="English"></track>此代码并将此字幕文件上传到我的服务器评论气球已出现在我的播放器菜单中，但没有显示字幕。

当我搜索时，我读到 webvtt 格式将运行 :( 但是 srt 格式或其他格式如何以及在运行时我将如何实现和转换 webvtt 格式。

我也收到了这个Video Js Caption Plugin 我已经阅读了这个文档，但我不太明白在哪里提供字幕链接。

请帮助如何添加字幕以及我应该从哪里开始。

谢谢

【参考方案1】：

我想提一下另一种以编程方式将曲目添加到 video.js 的方法：

var videoOptions = 
        controls: true,
        responsive: true,
        autoplay: true,
        preload: 'metadata',
        sources: [src: 'https://domain/myfile.m3u8', type: 'application/x-mpegURL'],
        tracks: [src: 'https://domain/mysub.vtt', kind:'captions', srclang: 'en', label: 'English']
      
// create the player using the above options
videojs('my-player', videoOptions);

您还可以在创建播放器后添加/删除/选择播放器曲目，如here 所述。

【讨论】：

您将如何以编程方式传递哪个轨道是“默认”轨道？我尝试只使用单词 default，而不是对象字段。但是后来我的 Typescript 声明出现了问题。

我想通了：videoOptions 中的“default=true”和我的 Typescript 声明中的“default?: boolean”。

更正：videoOptions 中的“default: true”。

【参考方案2】：

以下是如何为视频添加字幕的示例：

https://jsfiddle.net/xrpnbwfz/1/

<video id="dotsub_example" class="video-js vjs-default-skin"    poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" data-setup='[]'>
   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/chi_hans/vtt' srclang='zh' label='Chinese' default />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/eng/vtt' srclang='en' label='English' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/spa/vtt' srclang='es' label='Spanish' />
   <track kind='captions' src='https://dotsub.com/media/5d5f008c-b5d5-466f-bb83-2b3cfa997992/c/fre_ca/vtt' srclang='fr' label='French' />
</video>

有很多网站可以将您的 SRT 转换为适用于 videojs 的 WebVTT：https://atelier.u-sub.net/srt2vtt/