如何通过CSS在HTML5视频中设置文本轨道样式?

前端之家收集整理的这篇文章主要介绍了如何通过CSS在HTML5视频中设置文本轨道样式?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在 HTML5视频播放器中设置文本轨道(如字幕和字幕)的样式?

我已经找到了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有点困惑.它可以工作,但渲染是非常错误的.

但更重要的是:如何为Firefox和IE实现这一目标?

解决方法

将此用于Chrome:
video::cue {
  // add style here
}

火狐:

不支持.打开bug来实现:: cue伪元素 –
https://bugzilla.mozilla.org/show_bug.cgi?id=865395

编辑:支持FireFox,它的工作方式与Chrome和Opera相似.但Edge或IE尚未提供支持.

猜你在找的CSS相关文章