CSS如何在全屏模式下禁用Microsoft Edge边缘媒体控件？

Question

我有以下代码，可以使用自定义控件将视频切换到全屏模式：

 fullScreenButton.addEventListener("click", function() {
              if (video.requestFullscreen) {
                video.videoContainer.requestFullscreen();
              } else if (video.mozRequestFullScreen) {
                video.mozRequestFullScreen(); // Firefox
              } else if (video.webkitRequestFullscreen) {
                video.webkitRequestFullscreen(); // Chrome and Safari
              }
 });

这很好用但是当我切换到全屏时，自定义控件不在那里，默认的边控制是。对于chrome我做了这个：

::-webkit-media-controls {
  display:none !important;
}

这有效但我不知道如何为Microsoft Edge或FireFox做到这一点。有人可以告诉我该怎么做吗？

Answer 1

从这个问题：change html5 video controls layout when fullscreen

您需要做的就是引用整个控件机箱来隐藏它：

::-webkit-media-controls-enclosure {
 display:none !important;
}

，您需要将z-index设置为2147483647以上

并将自定义控件设置为position: absolute;

同样，不是我的工作或代码，只做了一些研究，它似乎是你正在寻找的。