обнаружение :: 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, поэтому мне нужно скрыть те заголовки, которые Im программно отображает для этих браузеров.

Моей первой идеей было бы выполнить некоторый код (скрыть заголовки), если браузер не поддерживает псевдо-элемент :: 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 (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