检测:: 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

:: {线索能见度：隐藏;}

在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)（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