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上使用它？必须有一个等效的-webkit-media-controls for firefox。

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

1 个答案: