IE vtt轨道背景色

Question

为什么IE加载的.vtt没有黑底，chrome却有，需要IE正常，黑底找了一圈都没有。

非常感谢对此问题的任何帮助。

HTML:

 <video [src]='videoURL' controls (ended)="onVideoEnd($event)" [style.maxHeight]="screen.data.height">
    <track label="English" kind="subtitles" srclang="en" [src]="screen.data.ccs" default
 </video>

CSS

video {
    width: auto;
    position: absolute;
    top: 25%;
    left: 50%;
    height: 47%;
    width: auto;
    transform: translate(-50%, -50%);
}

video:fullscreen{
    transform: translate(0%, 0%);
}

Chrome:

IE:

Answer 1

根据spec，您可以为提示设置样式

video::cue {
  background-image: linear-gradient(to bottom, dimgray, lightgray);
  color: papayawhip;
}

video::cue(b) {
  color: peachpuff;

}

凭记忆，这在 IE 中有效。

Answer 2

请检查 CSS 样式，我猜你可能正在使用 ::cue CSS 伪元素来设置背景颜色。从this article可以看出IE浏览器不支持这个属性。所以在IE浏览器中不会显示背景色。

我建议你可以尝试去除背景色，这样在Chrome和IE浏览器中，它们将具有相同的样式（没有背景色）。

IE vtt轨道背景色

IE vtt track background color

internet-explorer

vtt

webvtt

angular