videojsプレイリストの動画に字幕を追加するにはどうすればよいですか？

Question

私はofficial videojs advanced player exampleを再現しています。

ここまでうまくいっていますが、プレイリストの各動画にキャプションを追加したいと考えています。

これは可能ですか？私は以下のプラグイン使用しています

：videoタグ内に実装する際tracksに

• videojs-playlist
• videojs-playlist-ui

videojsのドキュメントはここにある：

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-プレイリストにキャプションを追加するために次のトラックがプレイリストで実行されるたびに自動的にキャプションが追加されます。あなたはvideojs、プレイリストのプラグインでそれを使用することができます「トラック」という名前のプレイリストの2番目のパラメータを追加したら、オブジェクトのプレイリストアレイ内

、

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'}}]); 

。 videojs-playlistプラグインでは、 'clearTracks'関数の89行目に戻り、whileループでは、既存のトラック削除メソッドをstatementに置き換えます。

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

下記次にプレイリストのプラグインで114行目に行くとplayer.src(item.sources);後のコード行を追加します。

player.addRemoteTextTrack(item.track); 

それだと、それは自動的に次の演奏曲のキャプションを表示すること。