Está bien, tengo un elemento de vídeo con controles personalizados, pero no tengo ni idea de por qué cuando hago el vídeo a pantalla completa haciendo doble clic, el control personalizado que se he hecho simplemente se bloquea detrás del video, me dio el video z-index y también a los controles, pero el panel de control está siempre detrás del video proyectado completo, este es el código.
"use strict"
const videoEvents = ['click', 'dblclick', 'mouseenter', 'mousedown', 'mousemove', 'change'];
const videoEventDistributer = document.querySelector('.videoPlayerContainer');
const mainVideo = document.querySelector('.mainVideo');
const videoPlayerControlerContainer = document.querySelector('.videoPlayerControlerContainer');
const btnFullscreen = document.querySelector('.btnFullscreen');
const btnExitFullscreen = document.querySelector('.btnExitFullscreen');
let turnOnController = false;
const fullscreenManager = () => {
if (document.fullscreenElement !== mainVideo) {
mainVideo.requestFullscreen();
btnFullscreen.classList.remove('active');
btnExitFullscreen.classList.add('active');
videoEventDistributer.style.setProperty('width', '100vw');
videoEventDistributer.style.setProperty('height', '100vh');
videoPlayerControlerContainer.style.setProperty('top', 'calc(100vh - 40px)');
}
if (document.fullscreenElement === mainVideo) {
document.exitFullscreen();
btnExitFullscreen.classList.remove('active');
btnFullscreen.classList.add('active');
videoEventDistributer.style.setProperty('width', '80vh');
videoEventDistributer.style.setProperty('height', 'calc(45vh + 40px)');
videoPlayerControlerContainer.style.setProperty('top', '45vh');
}
}
//
videoEvents.forEach(videoEvent => {
videoEventDistributer.addEventListener(videoEvent, event => {
if (event.type === 'click') {
if (event.target === mainVideo) {
if (mainVideo.paused) {
mainVideo.play();
} else {
mainVideo.pause();
}
}
}
if (event.type === 'dblclick') {
fullscreenManager();
}
if (event.type === 'mouseeneter') {
}
if (event.type === 'mousemove') {
}
if (event.type === 'mousedown') {
}
if (event.type === 'change') {
}
});
});body {
background: steelblue;
}
.videoPlayerContainer {
position: fixed;
width: 80vh;
height: calc(45vh + 40px);
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mainVideo {
width: 100%;
height: calc(100% - 40px);
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
.videoPlayerControlerContainer {
height: 40px;
width: 100%;
background: green;
transform: translateY(0);
position: absolute;
top: 45vh;
left: 0;
z-index: 100;
transition: transform .3s;
display: grid;
place-items: center;
gap: 25px;
grid-template-columns: 10% 50% 20% 1fr;
}
.videoPlayerControlerContainer.active {
transform: translateY(-100%);
transition: transform .3s;
}
.btnPause,
.btnPlay {
height: 25px;
width: auto;
display: none;
}
.btnPause.active,
.btnPlay.active {
display: block;
}
.progressBar {
width: 100%;
}
.audioBar {
width: 80%;
}
.btnFullscreen,
.btnExitFullscreen {
height: 25px;
width: auto;
display: none;
}
.btnFullscreen.active,
.btnExitFullscreen.active {
display: block;
}<body>
<div class="videoPlayerContainer">
<video class="mainVideo" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"></video>
<div class="videoPlayerControlerContainer">
<img src="pause.svg" alt="" class="btnPause active">
<img src="play.svg" alt="" class="btnPlay">
<input class="progressBar" type="range" name="" id="">
<input class="audioBar" type="range" name="" id="">
<img class="btnFullscreen active" src="goFullScreen.svg" alt="">
<img class="btnExitFullscreen" src="exitFullScreen.svg" alt="">
</div>
</div>
</body>Quiero ser capaz de poner mi controladora delante del video proyectado completo, CurrentY que se cambia de tamaño bastante bien cuando el video es pantalla completa, pero es detrás del vídeo, deseando darle consejos y comentarios!
Puede comprobar este post Ocultación controles nativos HTML5 vídeo en modo de pantalla completa . En este post se discute este problema con claridad. Puede ocultar los controles nativos en pantalla completa utilizando este código
video::-webkit-media-controls { display:none !important; }
Yo trabajo con su código, pero por desgracia no puedo capaz de mostrar su controll personalizado. Puede ser que usted puede encontrar algo