2 
 <video id="videodisplay-0" class="js-play" crossorigin="anonymous">
    <source src="things.mp4" type="video/mp4">
    <track label="English" kind="captions" srclang="en" default="" src="test.vtt">
 </video>

以上是我页面中带有字幕轨道的 HTML5 视频片段。

我有这个 CSS

::cue { visibility: hidden;}

在 Chrome、Opera 和 Safari 中，此 CSS 隐藏浏览器显示的默认标题，然后以编程方式显示标题。

Firefox 和 IE 目前不支持::cue伪元素，所以我需要能够隐藏我以编程方式为这些浏览器显示的标题。

如果浏览器不支持伪元素，我的第一个想法是执行一些代码（隐藏标题）::cue，而我在 JavaScript 或 SASS 中都无法完成。

如何检测浏览器何时不支持::cue伪元素？

4

1 回答 1

2

您可以创建一个设置了伪元素的<style>元素video::cue，创建一个元素，将和元素<video>附加到，用于获取 伪元素的属性。如果属性的 是空字符串，则浏览器不支持伪元素。stylevideodocumentwindow.getComputedStyle()video ::cueResolved value::cue

资源

function cueSupported() {
  var video = document.createElement("video");
  var style = document.createElement("style");
  style.textContent = "video::cue {background: inherit}";
  document.body.appendChild(style);
  document.body.appendChild(video);
  var cue = window.getComputedStyle(video, "::cue").background;
  document.body.removeChild(style);
  document.body.removeChild(video);
  delete style; 
  delete video;
  return !!(cue.length);
}

if (cueSupported()) {
  console.log("::cue pseudo element supported")
} else {
  console.log("::cue pseudo element not supported")
}

plnkr http://plnkr.co/edit/UzD41KjUARGEoncRxD5x?p=preview

于 2016-12-09T22:10:05.250 回答