Manipulating WebVTT cues through jquery

Question

I would like to manipulate the pseudo element: "::cue" through jquery. Let's say that I have a video like this:

<video id="my_video">
  <source src="my_video.mp4" type="video/mp4">
  <track src="my_subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

How can I dynamically change the color of its subtitles with jquery?

I tried this:

$('#my_video::cue').css({
  'color': '#ff0000 !important'
});

But it is not working. The only thing I got working was:

$('#captions_style').remove();
$('head').append(
  '<style id="captions_style">#my_video::cue{color: #ff0000 !important}</style>'
);

But I find this not elegant. Is there any other way?

Thanks & best regards Josef

WEB Last Wolf · Answer 1 · 2019-10-11T16:49:46.003

Just like an element that must be added to your class ::before or ::after the element ::cue applies the same rule, it cannot be changed directly by javascript or jquery, for example, but is possible to add class and remove classes from an element, so you can make a bit more dynamic code like this:

Your HTML file

<video id="my_video_element" controls loop>

    <source src="video.mp4" type="video/mp4">
    <track kind="captions" src="web.vtt" srclang=" EN " label="EN">

</video>

<!-- this button/link this button will change the values -->
<a href="#" class="chance_caption">Click to change VTT</a>

Your CSS file .alphaclass::cue{

    background: #09f;
    color: #000;

}

And the JS with Jquery file

$(document).ready(function() {

    $('.chance_caption').click(function(){

        $('#my_video_element').addClass('alphaclass');

        return false;

    });

});

The advantage of making for classes that when you define in one video element you can apply in another using utilizando $(element).removeClass(‘NameClass’); and $(element).addClass(‘NameClass’);.

I hope I was helpfull.

Manipulating WebVTT cues through jquery

1 Answers1