VideoJs可以用中文显示字幕吗?

时间:2015-04-15 09:08:25

标签: utf-8 video.js

我刚开始使用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)中文字幕&#34; demo.captions_C.vtt&#34;即使设置为默认值,也不会显示。相反,&#34; demo.captions.vtt中的标题是&#34;显示。

2)我试图选择&#34;中文&#34;在标题菜单中。没有回应也没有变化。

&#34; demo.captions_C.vtt&#34;提供如下:

&#13;
&#13;
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
鲸鱼在召唤
&#13;
&#13;
&#13;

我可以在demo.captions.vtt和demo.captions_C.vtt之间区分唯一的区别(除了内容)后者使用utf8编码,而第一个使用us-ascii。

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

1 个答案:

答案 0 :(得分: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