IE vtt轨道背景颜色答案

【问题标题】：IE vtt track background colorIE vtt轨道背景颜色
【发布时间】：2018-11-12 21:53:41
【问题描述】：

为什么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%);
}

铬：

IE：

【问题讨论】：

标签： angular internet-explorer webvtt vtt

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

}

根据记忆，这在 IE 中有效。

【讨论】：

这在 Chrome 中有效，但在 IE 中无效我还尝试在 vtt 文件本身中实现样式，但在以太浏览器中无效。
@DylanAnlezark 看看这里的examples，主要是 6 个。这可能适用于您的情况。