背景不适用于视频隐藏式字幕::iOS Mobile 上的 Firefox 和 Safari 上的cue

Question

我正在尝试通过

::cue

css 选择器在 HTML5 视频播放器上设置隐藏式字幕样式，如下所示。 codepen 链接

::cue {
  background: rgba(255, 255, 255, 0.8); /*Not working on iOS Mobile Firefox, Safari*/
  color: #463C40;
}

background 属性在 chrome - 桌面、firefox - 桌面上运行良好。但同样的方法不适用于 iOS 移动设备 firefox 和 safari。

我尝试通过如下所示的线性渐变来实现背景颜色。但它添加了一个轮廓（看起来像边框）codepen链接

::cue{
  color: #463C40;
  background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.8),rgba(255, 255, 255, 0.8));
}

background 属性是 supported for ::cue 已从 MDN 验证。有没有办法让iOS手机浏览器渲染背景色

提前致谢。

状态更新（2024 年 1 月）：到目前为止，尚未找到此问题的解决方案，我们已切换回浏览器自行显示隐藏式字幕的默认方式。

Answer 1

Chrome 浏览器使用

video::cue

background-color

和

opacity

。

video::cue {
  opacity: 0.8;
  background-color: #333;
  font-size: 16pt !important;
}

Safari 浏览器使用

-webkit-media-text-track-display-backdrop

作为背景颜色。请注意 !important ，它会覆盖 Safari 的“自己”样式。

video::-webkit-media-text-track-display-backdrop {
  background-color: #333 !important;
  overflow: visible !important;
}

以下

webkit-media-text-track-display

overflow

在 Chrome 浏览器中在标题文本周围添加更多填充：

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

Overflow: visible

在此代码中对于

Safari

很重要。在这里，我们使用下面的代码为我们的视频设置字幕转换，这取决于固定的字体大小：

video::-webkit-media-text-track-container {
  overflow: visible !important;
  transform: translateY(30%) !important;
}

Answer 2

也许你可以尝试下面的代码：

背景: url("back.jpg") #033049;
或者你也可以尝试这个： html，正文{背景：url('images/back.jpg');}