Как обновить область записи videojs при использовании плейлиста?

Question

сценарий

Я использую следующий плагин, который получает подписи к видео и отображает их в стенограмме:

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

Мой проигрыватель основан на расширенном примере проигрывателя (который использует плагины playlist и playlist-ui):

http://videojs.com/advanced/

Желаемое поведение

В конце видео содержание и функциональность области расшифровки должны измениться, чтобы соответствовать следующим заголовкам видео.

Фактическое поведение

Стенограмма работает для первого видео.

Однако в конце видео начинает воспроизводиться следующее видео, и область расшифровки остается неизменной (текст и функциональность) и продолжает использовать .vtt файл, связанный с первым видео.

Подписи ко второму видео (которые отображаются в области видео) отображаются правильно.

Что я пробовал

Я добавил слушателя в конец видео, очистил 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

Вопрос

Как я могу убедиться, что заголовки каждого видео загружаются в области записи при переходе от одного видео к другому?

Answer 1

Кажется, это работает, посмотрите это событие videojs-playlist:

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

});