javascript - 检测:: cue伪元素，或在浏览器不支持:: cue时执行某些操作

 <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伪元素？

最佳答案

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

资源资源


Implement the ::cue pseudo-element（Firefox）
CSS Compatibility in Internet Explorer（即）
Support ::cue pseudo-element for styling WebVTT cues (eg subtitles)（Webkit）
10.3.2.3.1 The '::cue' pseudo-element

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