プレイリストを使用しているときにvideojsのトランスクリプトエリアを更新するにはどうすればよいですか？

Question

シナリオ

私は動画のキャプションを取得し、転写エリアに表示され、次のプラグインを使用しています：私のプレイヤーがプレイリストを使用する（高度なプレーヤーの一例に基づいています

https://github.com/walsh9/videojs-transcript

をプレイリスト-UIプラグイン）：

http://videojs.com/advanced/

希望の動作

ビデオの最後に、トランスクリプト領域の内容と機能が次のビデオキャプションに関連するように変更する必要があります。

実際の動作

転写物は、最初のビデオのために働いています。

ただし、動画の最後に次の動画が再生され、転写物の領域は同じまま（テキストと機能）、最初の動画に関連付けられたファイル.vttが引き続き使用されます。

（ビデオ領域に表示されている）2番目のビデオのキャプションが正しく表示されています。私はビデオの最後にリスナーを追加

試してみた何

、転写エリアのHTMLをクリアしてから試してみて、両方videojsと、次のとトランスクリプトプラグインを再初期化するが、転写領域には同じテキストと機能が再埋め込まれています。

// BEGIN initialize video.js and when done run initialiseTranscriptPlugin() 
var my_video_id = videojs('preview-player', {}, function() { 
    initialiseTranscriptPlugin(this); 
}); 
// END initialize video.js and when done run initialiseTranscriptPlugin() 


// BEGIN initialise transcript plugin 
function initialiseTranscriptPlugin(this_thing) { 
    var options = { 
     followPlayerTrack: true, 
     showTitle: false, 
     showTrackSelector: false, 
     clickArea: "text" 
    }; 

    var transcript = this_thing.transcript(options); 
    transcript.id = "transcript_container"; 

    var transcriptContainer = document.querySelector("#transcript_container"); 
    transcriptContainer.appendChild(transcript.el()); 
} 
// END initialise transcript plugin 


// BEGIN events at end of video 
document.getElementById('preview-player').addEventListener('ended', myHandler, false); 

function myHandler(e) { 

    var transcriptContainer = document.querySelector("#transcript_container"); 

    // clear contents of transcript container 
    transcript_container.innerHTML = ""; 

    // BEGIN initalise video.s js again and run initialiseTranscriptPlugin() 
    var my_video_id = videojs('preview-player', {}, function() { 
     initialiseTranscriptPlugin(this); 
    }); 
    // END initalise video.s js again and run initialiseTranscriptPlugin() 

} 

// END events at end of video 

質問

どのように私は、次の1つの映像から移動するときに、各動画のキャプションは転写領域にロードされていることを確認していますか？

Answer 1

これが動作しているようです、このvideojsプレイリストイベントを参照してください。

https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md#playlistitem

// my_video_id.on('playlistitem', function() { 

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

    var transcriptContainer = document.querySelector("#transcript_container"); 

    transcript_container.innerHTML = ""; 

    var options = { 
     followPlayerTrack: true, 
     showTitle: false, 
     showTrackSelector: false, 
     clickArea: "text" 
    }; 

    var transcript = test.transcript(options); 
    transcript.id = "transcript_container"; 

    transcriptContainer.appendChild(transcript.el()); 

}); 

を