相当于moz-media-controls的Firefox [英] Firefox equivalent of moz-media-controls

问题描述

我正在从事一个涉及视频播放器的项目.我正在HTML上使用本机标记.我想以全屏模式显示图像.我可以使用以下CSS选择器来做到这一点，但它仅适用于Chrome:

I working on a project that involves a video player. I'm using the native tag on HTML. I want to have an image shown in the fullscreen mode. I can do so with the following CSS selector, but it only works on 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.

How can I make this work on Firefox as well? There must be a equivalent of -webkit-media-controls for firefox.

推荐答案

可能没有等效的Firefox.本文讨论了如何在基于Webkit的浏览器中隐藏全屏视频控件，但无法找到以Moz开头的等效项:

There might not be a Firefox equivalent. This article discusses how to hide the fullscreen video controls in Webkit-based browsers, but fails to find a moz- prefixed equivalent:

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

但是，正如它提到的，您可以做的另一件事是全屏显示包含video元素的外部元素，而不是全屏显示video元素本身.然后，您可以控制用户看到的内容.但是我认为，这对于没有启用自己的控件的视频元素来说效果最好，因为标准视频控件包括一个全屏按钮，无法实现您想要的功能.

But, as it mentions, another thing you can do is fullscreen an outer element that contains the video element, rather than fullscreening the video element itself. Then you can control what the user sees. But I think this works best with video elements that don't have their own controls enabled, since the standard video controls include a fullscreen button that won't do what you want.

要全屏显示任何元素，请使用requestFullscreen方法.它可以在当前所有主流浏览器上运行，尽管其中某些浏览器可能仍需要使用前缀名称(例如mozRequestFullscreen).

To fullscreen any element, use the requestFullscreen method. It works on all the current major browsers, although some of them may still require using a prefixed name (i.e. mozRequestFullscreen).

https://developer.mozilla.org/zh-CN/docs/Web/Guide/API/DOM/Using_full_screen_mode

这篇关于相当于moz-media-controls的Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！