如何为 videojs 播放列表中的视频添加字幕？

Question

我正在重新创建official videojs advanced player example。

到目前为止一切顺利，但我想为播放列表中的每个视频添加字幕。

这可能吗？

我正在使用以下插件：

• videojs-playlist
• videojs-playlist-ui

tracks 上的 videojs 文档在 video 标记中实现时在这里：

http://docs.videojs.com/docs/guides/tracks.html

他们建议使用这个 HTML：

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" data-setup='{"example_option":true}'>
    <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" />
    <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
    <track kind="captions" src="http://example.com/path/to/captions.vtt" srclang="en" label="English" default>
</video>

但是，当我使用播放列表时，我会这样实例化：

HTML

<section class="main-preview-player">
    <video id="preview-player" class="video-js vjs-default-skin vjs-fluid" controls preload="none">
        <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>
    <div class="playlist-container preview-player-dimensions vjs-fluid">
        <div class="vjs-playlist"></div>
    </div>
</section>

JS

var my_video_id = videojs('preview-player');

// define an array of playlist item objects
var my_playlist = [{
        name: 'Video Title',
        description: 'Description goes here',
        duration: 45,
        sources: [
            { src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' },
            { src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' },
        ],
        poster: 'oceans.jpg',
        // you can use <picture> syntax to display responsive images
        thumbnail: [{
            srcset: 'oceans.jpg',
            type: 'image/jpeg',
            media: '(min-width: 400px;)'
        }, {
            src: 'oceans-low.jpg'
        }]
    },
    // and more entries like this
];

// instantiate the playlist
my_video_id.playlist(my_playlist);

// set to play next track at end of track
my_video_id.playlist.autoadvance(0);

// instantiate the playlist ui
my_video_id.playlistUi();

播放列表项结构

如上图，播放列表项结构如下：

{
name: 'Video Title',
description: 'Description goes here',
duration: 45,
sources: [
{ src: 'http://vjs.zencdn.net/v/oceans.mp4', type: 'video/mp4' },
{ src: 'http://vjs.zencdn.net/v/oceans.webm', type: 'video/webm' },
],
poster: 'oceans.jpg',
// you can use <picture> syntax to display responsive images
thumbnail: [
{
srcset: 'oceans.jpg',
type: 'image/jpeg',
media: '(min-width: 400px;)'
},
{
src: 'oceans-low.jpg'
}
]
}

可以在该对象的某处定义标题吗？

否则，如何为播放列表中的每个视频显示字幕？

Answer 1

这对我有用（在播放列表项对象中使用它）：

"textTracks":[ { "kind":"captions", "label":"French", "src":"/path/to/webvtt", "default":false } ]

每人：

https://github.com/brightcove/videojs-playlist/issues/47

Answer 2

为了给 videojs-playlist 添加字幕，你可以稍微修改一下插件，每次播放列表中播放下一首曲目时，它会自动添加字幕。

在对象的播放列表数组中，

var player = videojs('video');
player.playlist([{
    sources: [{
    src: 'http://media.w3.org/2010/05/sintel/trailer.mp4',
    type: 'video/mp4'
}],
track: { kind: 'captions', label: 'English', srclang: 'en', src:'track source goes here'}}]);

在名为“track”的播放列表中添加第二个参数后，您可以在 videojs-playlist 插件中使用它。 在 videojs-playlist 插件中，转到“clearTracks”函数中的第 89 行，并在 while 循环中用语句替换现有的轨道删除方法。下面

  if(i >= 1) {
    player.removeRemoteTextTrack(tracks[i-1]);
  }

然后到播放列表插件中的第114行，在player.src(item.sources);后面加上这行代码：

  player.addRemoteTextTrack(item.track);

就是这样，它会自动显示下一个播放曲目的标题。