<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>
Above is the HTML5 video segment from my page with a captions track.
I have this CSS
::cue { visibility: hidden;}
In Chrome, Opera and Safari, this CSS hides the default captions that the browser shows, after that captions are displayed programmatically.
Firefox and IE currently don't support the ::cue pseudo element, so I need to be able to hide the captions that I'm programmatically showing for those browsers.
My first idea would be to execute some code (hide the captions) if the browser does not support the ::cue pseudo element, which I have not been able to accomplish in either JavaScript or SASS.
How do I detect when a browser does not support the ::cue pseudo element?
You can create a <style> element where video::cue pseudo element is set, create a <video> element, append both style and video elements to document, use window.getComputedStyle() to get the property of video ::cue pseudo element. If the Resolved value of the property is an empty string, the ::cue pseudo element is not supported at the browser.
Resources
Implement the ::cue pseudo-element (firefox)
Support ::cue pseudo-element for styling WebVTT cues (eg subtitles) (webkit)
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")
}