IE vtt轨道背景颜色

Posted 2023-03-07

【中文标题】IE vtt轨道背景颜色

【英文标题】：IE vtt track background color

【发布时间】：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：

【参考方案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 个。这可能适用于您的情况。