Question

我正在重建official videojs advanced player example。

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

这可能吗？

我使用以下插件：

在txt标记内实施的tracks上的videojs文档位于：

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

他们建议使用此HTML：

video

但是，当我使用播放列表时，我实例化如下：

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>

JS

<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>

播放列表项目结构

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

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();

可以在该对象的某处定义字幕吗？

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

Answer 1

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

computer_name:8899

每：

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循环中使用statement替换现有的track remove方法。以下

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

然后转到播放列表插件中的第114行，并在player.src(item.sources);之后添加以下代码：

  player.addRemoteTextTrack(item.track);

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

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

2 个答案: