How to refresh videojs transcript area when using a playlist?

Question

Scenario

I am using the following plugin which gets a video's captions and displays them in a transcript area:

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

My player is based on the advanced player example (which uses playlist and playlist-ui plugins):

Desired Behaviour

At the end of a video, the transcript area content and functionality should change to be relevant to the next videos captions.

Actual Behaviour

The transcript is working for the first video.

At the end of the video, however, the next video starts to play and the transcript area stays the same (text and functionality), and continues to use the .vtt file associated with the first video.

The captions for the second video (that are displayed in the video area) are showing correctly.

What I've Tried

I added a listener to the end of the video, clear the transcript area's html and then try and re-initialise both videojs and the transcript plugin with the following, but the transcript area is just re-populated with the same text and functionality.

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

Question

How do I ensure that each video's captions are loaded in the transcript area when moving from one video to the next?

score 0 · Accepted Answer · answered Feb 05 '17 at 08:01

This seems to work, see this videojs-playlist event:

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

});

How to refresh videojs transcript area when using a playlist?

1 Answers1