javascript - 检测::cue 伪元素，或在浏览器不支持::cue 时做一些事情

Question

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

Answer 1

您可以创建一个 <style>元素在哪里 video::cue设置伪元素，创建一个<video>元素，同时追加 style和 video元素 document , 使用 window.getComputedStyle()获得 video 的属性::cue伪元素。如果 Resolved value 属性的是一个空字符串，::cue浏览器不支持伪元素。

资源

• Implement the ::cue pseudo-element (火狐)

• CSS Compatibility in Internet Explorer (即)

• Support ::cue pseudo-element for styling WebVTT cues (eg subtitles) (网络工具包)

• 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