How to display captions only on custom TextTrackDisplay element, not on top of video?

[AVTPJ]

Hi,

I've asked this question on Stackoverflow as well but I thought maybe this would be better place to ask it.
Video.js: How to display captions only on custom TextTrackDisplay element, not on top of video

I'm attempting to display Video.js captions on a custom DOM element, outside of the video playing. This works as intended and below are snippets showing this.

Unfortunately, I can't seem to disable captions appearing also on top of the video too. Is there a way to disable captions appearing/showing on top of the video and only in the TextTrackDisplay element?

Any setting in the caption options (addRemoteTextTrack(options)) and textTrackSettings.setValues() seems to affect both on-video and custom captions.

let captionOption = {
    kind: 'captions',
    srclang: 'en',
    label: 'English',
    src: subURL,
    mode: 'showing',
};

connectTextTracks = (player) => {
    const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
    const textTrackDisplay = new TextTrackDisplay(player);
    subtitleDiv.appendChild(textTrackDisplay.el());
}

player.ready(function () {
    player.addRemoteTextTrack(captionOption);
    const tracks = player.remoteTextTracks();
    console.log(tracks.length); // print out greater than 0 if captions exists

    var settings = this.textTrackSettings;

    settings.setValues({
        backgroundColor: '#000',
        backgroundOpacity: '1',
        edgeStyle: 'uniform',
    });
    settings.updateDisplay();

    connectTextTracks(player);
});

[amtins]

Hi @AVTPJ , what about something like :

connectTextTracks = (player) => {
    const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
    const textTrackDisplay = new TextTrackDisplay(player, {playerOptions : {}}); //Avoid having errors in the console, see https://github.com/videojs/video.js/blob/df71bb0a2ca21d8a2aeb29847c3fce29312f9fe5/src/js/tracks/text-track-display.js#L124
    subtitleDiv.appendChild(textTrackDisplay.el());
}

To disable captions appearing also on top of the video you set the textTrackDisplay option to false

const player = videojs(videoEl, {
	//... other vjs options
   	textTrackDisplay : false //Disable the textTrackDisplay component
});

However I see some issues in your code. Calling settings.updateDisplay() will have no effect on the subtitleDiv because of :

video.js/src/js/tracks/text-track-settings.js

Lines 576 to 582 in df71bb0

	updateDisplay() {
	const ttDisplay = this.player_.getChild('textTrackDisplay');
	if (ttDisplay) {
	ttDisplay.updateDisplay();
	}
	}

Also since the textTrackDisplay instance is only available in the connectTextTracks function, if the media is paused and the settings are changed they will only be applied when the next CUE is loaded.

You can try to copy and paste the following code on your page and modify it according to your needs:

//Create the subtitle div and add it to the body
const subtitleDiv = document.createElement('div');
document.body.append(subtitleDiv);

//Create a new video tag and add it to the body
const videoEl = document.createElement('video');
videoEl.id = 'somePlayer';
videoEl.classList.add('video-js');
document.body.append(videoEl);

//Initialize the player (I assumed that videojs is available)
const somePlayer = videojs(videoEl, {
	controls: true,
	textTrackDisplay: false //Disable the textTrackDisplay component
}, () => {
	//Apple Bip Bop
	somePlayer.src('https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8');

	//Append the text display to the subtitle div
	const TextTrackDisplay = videojs.getComponent('TextTrackDisplay');
	const textTrackDisplay = new TextTrackDisplay(somePlayer, { playerOptions: {} }); //Avoid having errors in the console
	subtitleDiv.appendChild(textTrackDisplay.el());

	//Set the background color to red
	somePlayer.textTrackSettings.setValues({ backgroundColor: '#F00' });

        //Apply then changes immediately
        //See https://github.com/videojs/video.js/blob/df71bb0a2ca21d8a2aeb29847c3fce29312f9fe5/src/js/tracks/text-track-settings.js#L275-L287
	somePlayer.$('.vjs-done-button').addEventListener('click', ()=>textTrackDisplay.updateDisplay());
        somePlayer.$('.vjs-default-button').addEventListener('click', () => {
            somePlayer.textTrackSettings.setDefaults();
            textTrackDisplay.updateDisplay();
         });
	somePlayer.$$('select').forEach(e => e.addEventListener('change', ()=>textTrackDisplay.updateDisplay())); 
});

[AVTPJ]

Excellent, thanks @amtins ! I'll have a look at this in detail soon, just been pulled into something else at the moment.

I did manage to hide the on-video text track by adding a hidden attribute, as below, before creating a new text track for the subtitleDiv:

    const mainTextTrackDisplay = player.getChild('TextTrackDisplay');
    mainTextTrackDisplay.setAttribute("hidden", true);

[AVTPJ]

Thanks again @amtins that worked a treat.

I created a test case pen at https://codepen.io/avtconnect/pen/dyqMJQN

I did notice that if setting both textTrackDisplay and textTrackSettings to false causes textTrackSettings.setValues to throw an error. I guess this is due to the fact that we're setting the values of a textTrack which is not being displayed? Can you see a way around this?

Also, could you explain a little what happens in the section below? What are .vjs-done-button and .vjs-default-button and what is happening here? I looked at the source but didn't quite understand what was going on.

        //Apply then changes immediately
        //See https://github.com/videojs/video.js/blob/df71bb0a2ca21d8a2aeb29847c3fce29312f9fe5/src/js/tracks/text-track-settings.js#L275-L287
	somePlayer.$('.vjs-done-button').addEventListener('click', ()=>textTrackDisplay.updateDisplay());
        somePlayer.$('.vjs-default-button').addEventListener('click', () => {
            somePlayer.textTrackSettings.setDefaults();
            textTrackDisplay.updateDisplay();
         });
	somePlayer.$$('select').forEach(e => e.addEventListener('change', ()=>textTrackDisplay.updateDisplay())); 

[amtins]

@AVTPJ you're welcome 👍🏽

I did notice that if setting both textTrackDisplay and textTrackSettings to false causes textTrackSettings.setValues to throw an error. I guess this is due to the fact that we're setting the values of a textTrack which is not being displayed? Can you see a way around this?

You can set the textTrackDisplay and textTrackSettings to false in videojs but you have to be aware of the following:

video.js/src/js/tracks/text-track-settings.js

Lines 582 to 588 in 55cd188

	updateDisplay() {
	const ttDisplay = this.player_.getChild('textTrackDisplay');
	if (ttDisplay) {
	ttDisplay.updateDisplay();
	}
	}

And also

video.js/src/js/tracks/text-track-display.js

Lines 306 to 308 in 55cd188

	updateDisplayState(track) {
	const overrides = this.player_.textTrackSettings.getValues();
	const cues = track.activeCues;

That means both components textTrackDisplay and textTrackSettings need a reference to each other.

Example with the textTrackDisplay and textTrackSettings set to false

// Create the player
const player = videojs('player', {
  textTrackDisplay: false,
  textTrackSettings: false,
  //persistTextTrackSettings: true, //persist the setting in the localStorage
})

const TextTrackSettings = videojs.getComponent("TextTrackSettings");
// TextTrackSettings needs a playerOptions because of the persistTextTrackSettings, in case you want to store the settings in the localStorage
// You can also do {persistTextTrackSettings: true} to avoid setting the playerOptions
// See https://github.com/videojs/video.js/blob/55cd188cb311bd4ef3a396a4e73fd234931a091f/src/js/tracks/text-track-settings.js#L271-L273
const textTrackSettings = new TextTrackSettings(player, { playerOptions: player.options().playerOptions });

// This allows to satisfy the first code reference text-track-settings.js#L582-L588
// However by doing so, you no longer have access to the text track settings button in the subtitle menu
// Because of textTrackSettings: false when instantiating the player
// So you will only be able to modify the text track settings through JS
player.textTrackSettings = textTrackSettings;

const TextTrackDisplay = videojs.getComponent("TextTrackDisplay");
// player.options_.playerOptions allow to satisfy https://github.com/videojs/video.js/blob/55cd188cb311bd4ef3a396a4e73fd234931a091f/src/js/tracks/text-track-display.js#L127
//In case you set your tracks through the options when instantiating the player
const textTrackDisplay = new TextTrackDisplay(player, { playerOptions: player.options_.playerOptions });

//Set the background to green
textTrackSettings.setValues({ backgroundColor: "#0F0" });
//Apply the modification through the textTrackDisplay because we can't use the textTrackSettings.update because of https://github.com/videojs/video.js/blob/55cd188cb311bd4ef3a396a4e73fd234931a091f/src/js/tracks/text-track-settings.js#L582-L588
textTrackDisplay.updateDisplay();

//The rest of your code
// ...

Also, could you explain a little what happens in the section below? What are .vjs-done-button and .vjs-default-button and what is happening here? I looked at the source but didn't quite understand what was going on.

Basically I quickly re-implement the behavior of:

video.js/src/js/tracks/text-track-settings.js

Lines 275 to 287 in 55cd188

	this.on(this.$('.vjs-done-button'), 'click', () => {
	this.saveSettings();
	this.close();
	});
	this.on(this.$('.vjs-default-button'), 'click', () => {
	this.setDefaults();
	this.updateDisplay();
	});
	Obj.each(selectConfigs, config => {
	this.on(this.$(config.selector), 'change', this.updateDisplay);
	});

My implementation differs from text-track-settings.js#L275-L287 because it was for the sake of the example.

// There is no need to do that since the text track settings done button save the settings in the localStorage (if activated) an close the modal
somePlayer.$('.vjs-done-button').addEventListener('click', ()=>textTrackDisplay.updateDisplay());

//This is needed if you want to restore the default settings
somePlayer.$('.vjs-default-button').addEventListener('click', () => {
    somePlayer.textTrackSettings.setDefaults();
    textTrackDisplay.updateDisplay();
});

//This allows to apply the changes selecting a setting
somePlayer.$$('select').forEach(e => e.addEventListener('change', ()=>textTrackDisplay.updateDisplay())); 

Another approach is to extend the TextTrackSettings and override the method updateDisplay, if done correctly it eliminates the need to do the code above.

Keep in mind that we have changed the default behavior of videojs a bit.

Hope this helps.