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

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

html

需要使用track元素在html5上设置字幕样式的帮助吗,html,html5-video,Html,Html5 Video,我有这个工作，但字幕有一个黑色的背景，我想删除，并使字幕有一个小的黑色轮廓没有任何背景。感谢您的帮助，谢谢不确定该跟踪的目标元素** <body> <video width="500" height="375" controls class="playr_video"> <source type="video/mp4" src="testvideo.mp4" /> <track kind="subtitles" src="testvid

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

不确定该跟踪的目标元素**

<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>

如下文所述：

到目前为止，我找到的唯一跨浏览器解决方案是：隐藏视频的文本轨迹并使用自己的。

这将允许您使用类、id等创建自己的文本节点，然后可以通过css简单地设置样式

为此，您可以利用文本提示的oneter和onexit方法来实现自己的文本节点

.{
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;
}

我开始将我的字幕设计成黑色背景，并放置在Safari和Chrome视频的下方。我成功地使用了以下代码，并使用以下样式编辑了.vtt文件。注意：您必须将样式添加到.vtt文件中，否则在safari中，当视频控件（即使隐藏）出现时，您的字幕将跳转：

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();

chrome和safari标题的样式：

Chrome使用video:：cue背景色和不透明度

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.

Safari使用-webkit媒体文本跟踪显示背景作为背景色。注意！重要的是，它超越了Safari固有的风格

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

以下webkit媒体文本轨迹显示溢出允许在Chrome标题文本周围添加更多填充：

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

溢出可见在以下Safari代码中很重要，我正在使用转换设置视频下方的标题，这取决于固定的字体大小：

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

如重复问题中所述，使用以下css：

video:：cue{
背景色：透明；
文本阴影：#000 1px 1px 3px；
}

我正在寻找特定的帮助，以删除背景并放置大纲。我应该将其放置在何处？请将其放在标题中。h1{color:rgba（0,0,0,0）！重要；-webkit文本笔划宽度：1px；-webkit文本笔划颜色：黑色；}阅读此内容：对于您的内容，它可能是：跟踪{//此处使用我的代码}边缘如何？

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