通过jquery操作WebVTT线索

Question

我想通过jquery操纵伪元素：“：线索”。假设我有这样的视频：

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

如何使用jquery动态地更改其字幕的颜色？

我试过这个：

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

但这是行不通的。我唯一能做的就是：

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

但我觉得这不雅致。还有别的办法吗？

谢谢，并向约瑟夫问好

Answer 1

就像必须添加到类::before或::after中的元素一样，元素::cue应用相同的规则，它不能被javascript或jquery直接更改，但是可以添加类并从元素中删除类，这样就可以生成更动态的代码：

您的HTML文件

<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>

CSS文件.alphaclass::cue{

    background: #09f;
    color: #000;

}

和带有Jquery文件的JS

$(document).ready(function() {

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

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

        return false;

    });

});

创建类的优点是，当您在一个视频元素中定义时，可以使用utilizando $(element).removeClass(‘NameClass’);和$(element).addClass(‘NameClass’);在另一个视频元素中应用。

希望我能帮上忙。