Search code examples
javascripthtml5-videoplyrcaption

How to set a video caption track as default dynamically

I need to set a video caption track as default dynamically, I feel I missing some detail do reach it.

Part of my code is this:

track = document.createElement("track");
track.kind = "captions";
track.label = "Português";
track.srclang = "pt";
track.src = "captionsXYZ.vtt";

I tried do make that caption as default, doing this:

track.setAttribute('default', '');

and this

track.setAttribute('default', 'default')

But it shows up like this on browser:

<track label="Ligar" kind="captions" srclang="pt" src="captionsXYZ.vtt" default="">

And I need to be like this:

<track label="Ligar" kind="captions" srclang="pt" src="captionsXYZ.vtt" default>

But why do I need that?

I am working with a video player called plyr.io which is very good, mas it need caption is set default to show cc button, otherwise it doesn't show up. I did a manual test with FF inspector, deleting what I do not need it worked beautifully!

So, do you wise people have any clue?

I thank you all in advance.

enter image description here

enter image description here

Solution

  • Found it, friends.

    Going a little deeper into plyr.io code I found a setup that solves my problem.

    const player = new Plyr.setup('video', {
         captions: {
          active: true,
          update:true,// THAT line solved my problem
        }
})