0

设想

我正在使用以下插件来获取视频的字幕并将它们显示在脚本区域中：

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

问题

从一个视频移动到下一个视频时，如何确保每个视频的字幕都加载到脚本区域？

4

1 回答 1

0

这似乎有效，请参阅此 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());

});
于 2017-02-05T08:01:55.880 回答