2

Why does IE load the .vtt without a black background but chromes does, need IE to be normal and have the black background have searched around to no prevail.

Any help with this issue will be greatly appreciated.

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: Chrome:

IE: IE

Dylan Anlezark
  • 1,256
  • 2
  • 12
  • 27

2 Answers2

1

Please check the CSS style, I guess perhaps you are using the ::cue CSS pseudo-element to set the background color. From this article, we can find that the IE browser doesn't support this property. So, it will not display the background color in IE browser.

I suggest you could try to remove the background color, so that in Chrome and IE browser, they will have the same style (without background color).

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
0

According to the spec, you can style the cue

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

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

}

From memory, this works in IE.

Zze
  • 18,229
  • 13
  • 85
  • 118
  • This worked in Chrome but it didn't work in IE I also tried to implement the style in the vtt file itself and that didn't work in ether browser. – Dylan Anlezark Nov 12 '18 at 22:30
  • @DylanAnlezark have a look at the [examples](https://www.w3.org/TR/webvtt1/#introduction-other-features) here, mostly 6. This might work in your case. – Zze Nov 13 '18 at 00:04