需要帮助使用 track 元素在 html5 上设置字幕样式

Question

<body>
<video width="500" height="375" controls class="playr_video">
    <source type="video/mp4" src="testvideo.mp4" />
    <track kind="subtitles" src="testvideo.vtt" srclang="en" />
</video>
</body>
</html>

我有这个工作，但字幕有黑色背景，我想删除它并使字幕有一个没有任何背景的黑色小轮廓。感谢任何帮助，谢谢！

Answer 1

不确定这应该针对哪个元素进行跟踪**

.{
color: rgba(0,0,0,0) !important;
 -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

Answer 2

如此处所述：enter link description here

迄今为止我发现的唯一跨浏览器解决方案是：隐藏视频的文本轨道并使用您自己的文本轨道。

这将允许您创建自己的文本节点，带有类、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();

Answer 3

我着手将我的字幕设置为黑色背景，并放置在 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 background-color 和不透明度。

video::cue {
  opacity: 1;
  background-color: black;
  font-size: 20px !important;
}

Safari 使用 -webkit-media-text-track-display-backdrop 作为背景色。请注意 !important 会覆盖 Safari 的固有样式。

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 的以下代码很重要，我正在使用转换在视频下方设置字幕，这依赖于固定 font-size:

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

Answer 4

如重复问题中的回答，使用此 css:

video::cue {
    background-color: transparent;
    text-shadow: #000 1px 1px 3px;
}

需要帮助使用 track 元素在 html5 上设置字幕样式

Need help styling subtitles on html5 using the track element

html

html5-video