如何在 Internet Explorer 中设置 WebVTT 隐藏式字幕的样式？答案

【问题标题】：How can I style WebVTT Closed Captions in Internet Explorer?如何在 Internet Explorer 中设置 WebVTT 隐藏式字幕的样式？
【发布时间】：2018-04-24 02:27:43
【问题描述】：

有没有人成功地在 IE10/11 HTML5 视频元素中设置 WebVTT 隐藏式字幕？

我可以在 Safari/Chrome/FF 等中使用 ::cue CSS 选择器设置字幕样式。但它似乎对 IE 中的同一元素没有影响。

默认的 IE 标题样式是白色文本，后面有一个小的黑色文本阴影（在某些颜色上不是最明显的），但我希望它像其他浏览器一样在文本后面有一个灰色略透明的背景。

谢谢，

山姆

【问题讨论】：

Sam，如果你在字幕上添加背景成功，请分享:)
嘿@KunJ웃 - 令人讨厌的是，我在 IE10/11 中重新设置了字幕 UI 的样式并没有成功。您可以使用 :cue 选择器在许多其他浏览器中执行此操作.....

标签： css html internet-explorer

【解决方案1】：

您查看过此网站吗？ https://blogs.msdn.microsoft.com/mediastuff/2014/03/05/closed-captioning-its-not-just-for-accessibility-texttrack-in-html5-video/

它谈到在你的 html 中添加一个 track id 元素

<!DOCTYPE html>
<html>
  <head>
  <title>Simple track example</title>
  </head>
  <body>
    <video id="video1" controls autoplay>
      <source src="http://ie.microsoft.com/testdrive/Videos/BehindIE9ModernWebStandards/Video.mp4"  >
      <track id='track1' label='English captions' src="entrack.vtt" kind='subtitles' srclang='en' default >   
    </video>

  </body>
</html>

【讨论】：