Firefox 相当于 moz-media-controls答案

【问题标题】：Firefox equivalent of moz-media-controlsFirefox 相当于 moz-media-controls
【发布时间】：2015-02-06 17:14:51
【问题描述】：

我正在从事一个涉及视频播放器的项目。我在 HTML 上使用原生标签。我想以全屏模式显示图像。我可以使用以下 CSS 选择器这样做，但它仅适用于 Chrome：

::-webkit-media-controls {
        /*display:none !important;*/
        background-repeat: no-repeat;
        background-position: top; 
        background-image: url("../images/match_com.png");
    }

如何在 Firefox 上也能做到这一点？ firefox 必须有 -webkit-media-controls 的等效项。

【问题讨论】：

标签： webkit html5-video fullscreen

【解决方案1】：

可能没有 Firefox 等价物。本文讨论了如何在基于 Webkit 的浏览器中隐藏全屏视频控件，但找不到以 moz 为前缀的等效控件：

http://css-tricks.com/custom-controls-in-html5-video-full-screen/

但是，正如它所提到的，您可以做的另一件事是全屏显示包含视频元素的外部元素，而不是全屏显示视频元素本身。然后您可以控制用户看到的内容。但我认为这最适用于没有启用自己的控件的视频元素，因为标准的视频控件包含一个全屏按钮，它不会做你想做的事情。

要全屏显示任何元素，请使用 requestFullscreen 方法。它适用于当前所有主流浏览器，尽管其中一些可能仍需要使用前缀名称（即 mozRequestFullscreen）。

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

【讨论】：

作为this answer says，您无法在 Firefox 中设置原生控件的样式，但您可以用自己的方式覆盖它们。