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

Question

要在 Chrome/Safari 中禁用 HTML5 视频全屏按钮，此 CSS 有效但在 FF/IE 中无效：

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

我在 this thread where there is this fiddle 中发现它隐藏了所有浏览器中的全屏按钮。

我在 a CodePen 中复制了 fiddle，但结果不同。该按钮隐藏在 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>

Answer 1

这是因为 codepen 在包含 pen 文档的 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>

分叉代码笔：http://codepen.io/anon/pen/ONyELm

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

How can I disable the native fullscreen video button from controls in Firefox and IE?

css

html5-video

html5-fullscreen