是否可以在 HTML5 视频播放器中设置文本轨道（如字幕和字幕）的样式？
我已经为 Chrome 找到了一种方法：
video::-webkit-media-text-track-container {
// Style the container
}
video::-webkit-media-text-track-background {
// Style the text background
}
video::-webkit-media-text-track-display {
// Style the text itself
}
这似乎让 Safari 有点困惑。它可以工作，但渲染有很多错误。
但更重要的是：Firefox 和 IE 如何做到这一点？
【问题讨论】：
标签： html css internet-explorer firefox html5-video
【讨论】：
media-text-track 的东西。链接 1 不包含有关样式的信息，链接 2 中提出的解决方案需要重写字幕/字幕文件。所以这不是一个纯粹的 css 解决方案。
将此用于 Chrome：
video::cue {
// add style here
}
火狐：
尚不支持。打开错误以实现 ::cue 伪元素 - https://bugzilla.mozilla.org/show_bug.cgi?id=865395
编辑：
提供对 FireFox 的支持，它的工作方式与在 Chrome 和 Opera 中的工作方式类似。但目前还不支持 Edge 或 IE。
【讨论】：
迄今为止我发现的唯一跨浏览器解决方案是：隐藏视频的文本轨道并使用您自己的。
这将允许您创建自己的文本节点，包括类、id 等，然后可以通过 css 简单地设置样式。
为此，您将利用文本提示的 onenter 和 onexit 方法来实现您自己的文本节点。
var video = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
tracks = video.textTracks[0],
tracks.mode = 'hidden', // must occur before cues is retrieved
cues = tracks.cues;
var replaceText = function(text) {
$('WHERE_TEXT_GETS_INSERTED').html(text);
},
showText = function() {
$('WHERE_TEXT_GETS_INSERTED').show();
},
hideText = function() {
$('WHERE_TEXT_GETS_INSERTED').hide();
},
cueEnter = function() {
replaceText(this.text);
showText();
},
cueExit = function() {
hideText();
},
videoLoaded = function(e) {
for (var i in cues) {
var cue = cues[i];
cue.onenter = cueEnter;
cue.onexit = cueExit;
}
},
playVideo = function(e) {
video.play();
};
video.addEventListener('loadedmetadata', videoLoaded);
video.addEventLister('load', playVideo);
video.load();
【讨论】：
我开始将我的字幕设置为黑色背景，并位于 Safari 和 Chrome 的视频下方。我通过以下代码以及使用以下样式编辑 .vtt 文件取得了成功。请注意，您必须将样式添加到 .vtt 文件中，否则在 Safari 中，当视频控件（即使它们被隐藏）出现时，您的字幕会跳来跳去：
4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle
size:100%
for just the summer but I ended up staying here.
chrome 和 safari 字幕的样式：
Chrome 使用 video::cue 背景颜色和不透明度。
video::cue {
opacity: 1;
background-color: black;
font-size: 20px !important;
}
Safari 使用 -webkit-media-text-track-display-backdrop 作为背景色。请注意覆盖 Safari 固有样式的 !important。
video::-webkit-media-text-track-display-backdrop {
background-color: black !important;
overflow: visible !important;
}
以下 webkit-media-text-track-display 溢出允许在 Chrome 的标题文本周围进行更多填充：
video::-webkit-media-text-track-display {
overflow: visible !important;
}
溢出可见对于 Safari 的以下代码很重要，我正在使用转换设置视频下方的字幕，这依赖于固定的字体大小：
video::-webkit-media-text-track-container {
overflow: visible !important;
transform: translateY(30%) !important;
}
编辑
经过一些调整，我最终将它用于我的项目：
重要提示：从 .VTT 文件中删除所有内联样式。
确定用户使用的是 chrome 还是 safari。
const rootElement = document.getElementById('root');
const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
rootElement.className += "web";
if(M[1] === 'chrome'){
rootElement.className += " chrome";
} else {
rootElement.className += " safari";
}
然后在 SASS .scss 文件中使用以下样式。注意：如果您不使用 SASS，您可以简单地为视频元素创建一个类并嵌套相应的样式。
.chrome {
video::cue {
font-size: 24px;
opacity: 1;
background-color: black;
-webkit-transform: translateY(10%) !important;
transform: translateY(10%) !important;
}
video::-webkit-media-text-track-display {
overflow: visible !important;
-webkit-box-sizing: border-box;
background: black;
padding: 8px;
border-radius: 16px;
}
video::-webkit-media-text-track-container {
overflow: visible !important;
-webkit-transform: translateY(40%) !important;
transform: translateY(40%) !important;
position: relative;
}
}
.safari {
video::cue {
font-size: 24px;
opacity: 1;
background-color: black;
}
video::-webkit-media-text-track-display-backdrop {
background-color: black !important;
overflow: visible !important;
}
video::-webkit-media-text-track-display {
overflow: visible !important;
-webkit-box-sizing: border-box;
}
video::-webkit-media-text-track-container {
overflow: visible !important;
-webkit-transform: translateY(20%) !important;
transform: translateY(20%) !important;
position: absolute;
}
}
【讨论】：