Replies: 1 comment 3 replies
-
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 const player = videojs(videoEl, {
//... other vjs options
textTrackDisplay : false //Disable the textTrackDisplay component
}); However I see some issues in your code. Calling video.js/src/js/tracks/text-track-settings.js Lines 576 to 582 in df71bb0 Also since the 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()));
}); |
Beta Was this translation helpful? Give feedback.
-
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)
) andtextTrackSettings.setValues()
seems to affect both on-video and custom captions.Beta Was this translation helpful? Give feedback.
All reactions