使用播放列表时如何刷新videojs转录区域？

Question

场景

我正在使用以下插件获取视频的字幕并将其显示在转录区域：

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

我的播放器基于高级播放器示例（使用播放列表和播放列表-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());

});

使用播放列表时如何刷新videojs转录区域？

How to refresh videojs transcript area when using a playlist?

video.js

videojs-transcript