VideoJs可以显示中文字幕吗？

Question

我刚开始使用 VideoJS。 Javascript 库初始设置的简易性以及将视频干净地集成到网页中给我留下了深刻的印象。

但是我遇到了显示外语（例如中文）字幕的问题。下面是嵌入视频的代码

 <video id="example_video_1" class="video-js vjs-default-skin" controls  preload="none" width="640"
           height="264" poster="Image/oceans-clip.png" data-setup="{}">
    <source src="Video/oceans.mp4" type='video/mp4'/>             
    <track kind="captions" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
    <track kind="captions" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->            
    <track kind="subtitles" src="video-js/demo.captions_C.vtt" srclang="zh" label="Chinese" default></track>
    <track kind="subtitles" src="video-js/demo.captions.vtt" srclang="en" label="English"></track>
    <!-- Tracks need an ending tag thanks to IE9 -->
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that 
        <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

我遇到的问题是：

1) "demo.captions_C.vtt"中的中文字幕即使设为默认也不显示。而是显示 "demo.captions.vtt is " 中的字幕。

2) 我尝试在字幕菜单中 select "Chinese"。没有回应也没有变化。

下面提供"demo.captions_C.vtt"：

WEBVTT

00:00.000 --> 00:02.332
这是中文字幕

00:02.332 --> 00:10.947
海鸥的英雄礼赞音乐

00:10.947 --> 00:17.691
大海在咆哮

00:17.691 --> 00:50.279
鲸鱼在召唤

我能分辨出 demo.captions.vtt 和 demo.captions_C.vtt 之间的唯一区别（除了内容）是后者使用 utf8 编码，而第一个使用 us-ascii。

我想知道 (a) 在 html 代码中是否遗漏了与配置轨道的视频标签集成的任何内容。为什么只显示英文。 (b) 有没有人成功使用过使用 UTF-8 编码的 vtt 文件？请告诉我你的程序。

Answer 1

这是一个带有中文字幕的工作示例： https://jsfiddle.net/xrpnbwfz/1/

<video id="dotsub_example" class="video-js vjs-default-skin" width="640" height="264"  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>

如果您使用的是最新版本 4.12，captions/subtitles 存在一些已知问题：https://github.com/videojs/video.js/issues/1888 https://github.com/videojs/video.js/issues/1904 https://github.com/videojs/video.js/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+caption

VideoJs可以显示中文字幕吗？

Can VideoJs display subtitles in chinese?

utf-8

video.js