如何通过CSS在HTML5视频文本轨道样式？ [英] How to style text tracks in HTML5 video via CSS?

问题描述

是否可以在HTML5视频播放器中对文本轨道（如字幕和字幕）进行样式设置？

Is it possible to style text tracks (like subtitles and captions) in HTML5 video players?

我已经为Chrome找到了一种方法：

I already found a way to do so for Chrome:

video::-webkit-media-text-track-container {
    // Style the container
}

video::-webkit-media-text-track-background {
    // Style the text background
}

video::-webkit-media-text-track-display {
    // Style the text itself
}

这似乎使Safari混淆了一点。

This seems to confuse Safari a bit. It works, but the rendering is quite buggy.

但更重要的是：如何在Firefox和IE上实现这个功能？

But more important: How to achieve do this for Firefox and IE?

推荐答案

在Chrome中使用此方法：

Use this for Chrome:

video::cue {
  // add style here
}

Firefox：

尚不支持。打开要执行的错误:: cue pseudo-element -
https：// bugzilla。 mozilla.org/show_bug.cgi?id=865395

Not yet supported. Open bug to implement ::cue pseudo-element - https://bugzilla.mozilla.org/show_bug.cgi?id=865395

这篇关于如何通过CSS在HTML5视频文本轨道样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！