录影带能用中文显示字幕吗？

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)尝试在标题菜单中选择“中文”。没有反应，也没有变化。

"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，则标题/字幕存在一些已知问题：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