Question

编辑：我能够在Codepen中重新创建问题，其中包含两个相同的视频元素（和曲目），一个在页面上，另一个在模式中可访问。不幸的是，cc框在模态中根本没有出现： https://codepen.io/SarahF3000/pen/Rxyjgb

我使用视频元素来展示音频采访，以包含字幕。所以我缩短了视频元素的高度（100px）。

但似乎选择字幕语言（英语，法语或马其顿语）存在问题，从CC按钮打开的框不能很好地显示，语言选项也是如此（我们不能轻易点击它。）

以下是in Firefox和in Chrome的显示方式。

这是HTML代码：

<video controlsList="nodownload" controls>
  <source type="audio/mp3" src="skopje/volhan/volhan1.mp3">
  <track label="English" kind="subtitles" srclang="en" src="skopje/volhan/v1en.vtt" default>
  <track label="French" kind="subtitles" srclang="fr" src="skopje/volhan/v1fr.vtt">
  <track label="Macedonian" kind="subtitles" srclang="mk" src="skopje/volhan/v1mk.vtt">
</video>

CSS代码：

video {
    object-fit: initial;
    width: 100%;
    height: 100px;
    margin-top: -5px;
}

::cue {
    font-size: 18px;
    color: black;
    background-color: white;
    font-family: 'Fira Sans', sans-serif;
}

您知道是否有办法让CC框显示良好？

非常感谢！

编辑：我注意到这与页面响应的事实有关：视频播放器在引导模式内，而“CC框”始终位于页面的某个位置：with a 1413px large page和with a 1016px large page。但我仍然不知道如何解决它。

<video>元素和副标题 - 显示奇怪

0 个答案: