如何从Firefox和IE中的控件禁用本机全屏视频按钮?

时间:2016-03-05 05:38:33

标签: css html5-video html5-fullscreen

要在Chrome / Safari中停用HTML5视频全屏按钮,此CSS可用,但不适用于FF / IE:

video::-webkit-media-controls-fullscreen-button {
        display: none;
    }

我在this thread中找到了this fiddle,其中a CodePen隐藏了所有浏览器中的全屏按钮。

我在{{3}}中复制了那个小提琴,结果不同。该按钮隐藏在Chrome / Safari中,但在FF / IE中显示。 我错过了什么,但我不确定是什么。

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {
   background: red; 
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}
<video width="400" height="260" controls="">
 <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>

1 个答案:

答案 0 :(得分:1)

这是因为codepen在包含笔文档的iframe上添加了allowfullscreen属性,而jsfiddle则没有。

因此,您的问题的解决方案可能是将您的视频封装在没有此属性的iframe中:

frame.contentDocument.body.innerHTML = '<video src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" controls></video>';
<iframe id="frame" width="100%" height="100%" src="about:blank" frameborder="0"></iframe>

Forked codepen:http://codepen.io/anon/pen/ONyELm