如何样式文本轨道在HTML5视频通过CSS

是否可以在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有点困惑。它可以工作，但是渲染有很多bug。

但更重要的是:如何为Firefox和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();

Chrome:

video::cue {
  // add style here
}

Firefox:

暂不支持。打开bug以实现::cue伪元素-https://bugzilla.mozilla.org/show_bug.cgi?id=865395

编辑:

对FireFox的支持是可用的，它的工作原理与Chrome和Opera相似。但是Edge和IE还不支持。

我将我的标题设置为黑色背景，并放置在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- background作为背景色。注意!important，它覆盖了Safari的固有样式。

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

以下webkit-media-text-track-display overflow允许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;
}

编辑

经过一些调整，我最终在我的项目中使用了这个:

重要提示:删除. 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，你可以简单地为video元素创建一个类，并嵌套相应的样式。

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

这适用于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
}

你也可以从这些链接中得到一些信息。

链接1

链接2

html

<video >
    <source ref="videoSource">
    <track default kind="subtitles" src="xxx" />
</video>
//custom element for showing subtitle
<div ref='subtitleTrackWrapper' v-show='showTextTrack'></div>

javascript

let textTrack = [your video tag].textTracks[0]
textTrack.mode = 'hidden'
textTrack.addEventListener('cuechange', () => {
const cues = textTrack.activeCues; 
    if(cues.length>0){
        this.showTextTrack = true
        this.$refs.subtitleTrackWrapper.innerHTML = cues[0].text
    }else{
        this.showTextTrack = false
    }
});

对于跨浏览器解决方案，从Spencer S。的答案，但在香草js和使用略有不同的事件监听器…

/***
  * replace subtitles for cross-browser consistency
  * from Spencer S. - https://stackoverflow.com/a/45087610/4504073
***/ 
let track  = topperVideo.textTracks[0];
track.mode = 'hidden'; // must occur before cues is retrieved
let cues    = track.cues;
let subtitleElem = topperVideoWrapper.querySelector('#topper-video-subtitle');
  
let replaceText = function(text) {
  subtitleElem.innerHTML = text;
};
let showText = function() {
  subtitleElem.style.display = "block";
};  
let trackShow = function(text) {
  replaceText(text);
  showText();
};
let trackHide = function() {
  subtitleElem.style.display = "none";
};
track.addEventListener('cuechange', function(event) {
  // test for should-be visible cue
  let activeCue = track.activeCues[0];
    
  // if would be showing a cue
  if(activeCue) {
    // get text
    let activeCueText = activeCue.text;
    // show cue
    trackShow(activeCueText);
  } else {
    // hide cue
    trackHide();
  }
});
// play video here

相关内容

最新更新

热门标签：