我有以下代码,可以使用自定义控件将视频切换到全屏模式:
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做到这一点。有人可以告诉我该怎么做吗?
答案 0 :(得分:0)
从这个问题:change html5 video controls layout when fullscreen
您需要做的就是引用整个控件机箱来隐藏它:
::-webkit-media-controls-enclosure {
display:none !important;
}
,您需要将z-index设置为2147483647以上
并将自定义控件设置为position: absolute;
同样,不是我的工作或代码,只做了一些研究,它似乎是你正在寻找的。 p>