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

您可以创建passport.deserializeUser(function(id, done) { db.User.findById(id).then(function (user) { done(null, user); }).catch(function (err) { done(err, null, { message: 'User does not exist' }); }); });元素，其中设置了<style>伪元素，创建video::cue元素，将<video>和style元素追加到{{ 1}}，使用video获取document window.getComputedStyle()伪元素的属性。如果属性的Resolved value是空字符串，则浏览器不支持video伪元素。

资源

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

＆＃13;

::cue

＆＃13;

plnkr http://plnkr.co/edit/UzD41KjUARGEoncRxD5x?p=preview

detect :: cue伪元素，或者在浏览器中不支持:: cue时执行某些操作

1 个答案: