Firefox 相当于 moz-media-controls

Question

我正在从事一个涉及视频播放器的项目。我在 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。

Answer 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

Firefox 相当于 moz-media-controls

Firefox equivalent of moz-media-controls

webkit

fullscreen

html5-video