IE vtt track background color
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:
IE:
angular internet-explorer webvtt vtt
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
add a comment |
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:
IE:
angular internet-explorer webvtt vtt
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
add a comment |
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:
IE:
angular internet-explorer webvtt vtt
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
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:
IE:
angular internet-explorer webvtt vtt
angular internet-explorer webvtt vtt
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
asked Nov 12 '18 at 21:53
Dylan AnlezarkDylan Anlezark
18014
18014
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
add a comment |
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).
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270653%2fie-vtt-track-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
add a comment |
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.
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
add a comment |
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.
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
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.
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
answered Nov 12 '18 at 21:59
ZzeZze
9,55553667
9,55553667
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
add a comment |
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
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
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 here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
@DylanAnlezark have a look at the examples here, mostly 6. This might work in your case.
– Zze
Nov 13 '18 at 0:04
add a comment |
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).
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
add a comment |
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).
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
add a comment |
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).
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
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).
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
answered Nov 14 '18 at 6:56
Zhi Lv - MSFTZhi Lv - MSFT
40234
40234
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53270653%2fie-vtt-track-background-color%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
