change video source and caption dynamically on plyr.js?

Question

i'am struggling with the way of adding caption to plyr.js and nothing found so far on the internet my code is

<video class="player" style="min-width: 100%; min-height: 500px;" id="my-player"> </video>

and js is:

const player = new Plyr('#my-player');

what is should do to add both video source and caption with js ?

searching original git repo

Answer 1

i found the solution for this

according to this line:

const player = new Plyr('#my-player');

you should do this:

player.source = {
    type: 'video',
    title: 'Example title',
    sources: [
        {
            src: VIDEO_ADDR,
        }
    ],
    tracks: [
        {
            kind: 'captions',
            label: 'English',
            srclang: 'en',
            src: TRACK_ADDR,
            default: true,
        }
    ]
};
player.play();

it's better to place this on a event function like onclick