通过 jquery 操作 WebVTT 提示

Posted 2023-03-07

【中文标题】通过 jquery 操作 WebVTT 提示

【英文标题】：Manipulating WebVTT cues through jquery

【发布时间】：2019-03-11 09:02:16

【问题描述】：

我想通过jquery来操作伪元素："::cue"。假设我有一个这样的视频：

<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::cuecolor: #ff0000 !important</style>'
);

但我觉得这并不优雅。有没有其他办法？

感谢和最好的问候 约瑟夫

【参考方案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’); 在另一个视频元素中应用这些类的优势。

希望我对你有所帮助。