Soy nueva por aquí, vengo a ver si alguien puede ayudarme un poquito... Estoy haciendo una página con varios vídeos pequeñitos usando la etiqueta <video>, pero como son taan pequeños, los controles por defecto quedan enormes y estoy intentando hacer simplemente un botón grande de play que aparezca o desaparezca en función se esté viendo el vídeo o esté en pausa.
Tengo un código que casi funciona, llamando a una capa que tiene la imagen del play. El problema es que funciona solo una vez: aparece el play, le doy, el vídeo se reproduce y el play desaparece, pero si lo vuelvo a parar y lo vuelvo a reproducir la capa con el play se queda ahí, no se oculta en ningún momento...
No tengo mucha experiencia en .js así que ando un poco perdida
Os dejo el código a ver si alguien puede echarme una mano:
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
document.getElementById('video-overlay').style.display="block";
}
else {
video.play();
videoPlaying = true;
document.getElementById('video-overlay').style.display="hidden";
}
}
Muchas gracias :)
