Question

方案

我使用以下插件获取视频字幕并将其显示在成绩单区域中：

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

我的播放器基于高级播放器示例（使用播放列表和播放列表-ui插件）：

http://videojs.com/advanced/

所需行为

在视频结束时，成绩单区域的内容和功能应更改为与下一个视频字幕相关。

实际行为

成绩单正在为第一个视频工作。

然而，在视频结束时，下一个视频开始播放，抄本区域保持不变（文本和功能），并继续使用与第一个视频相关联的.vtt文件。

第二个视频的标题（显示在视频区域中）正确显示。

我尝试过什么

我在视频结尾添加了一个监听器，清除了脚本区域的html，然后尝试使用以下内容重新初始化videojs和transcript插件，但是脚本区域只是重新填充了相同的文本和功能。

// 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

driver.find_element_by_class_name('table_grey_border')

如何在使用播放列表时刷新videojs脚本区域？

1 个答案: