Estoy tratando de ocultar un video cuando está en pausa, pero el evento en pausa también se activa cuando mueves la línea de tiempo en el reproductor de video. ¿Es posible ajustar la línea de tiempo del video sin activar el evento de pausa?
var singleVideo = document.getElementById('single-video');
$(singleVideo).get(0).addEventListener('pause', function(){
$('#singleVideo').hide();
});
Después de hacer clic en la línea de tiempo, el video se detiene durante unos segundos y continúa reproduciéndose.
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<p>Play and pause the video</p>
<video id="single-video" height="200" controls="controls" preload="none" onpause="myFunction()">
<source type="video/webm" src="https://upload.wikimedia.org/wikipedia/commons/3/38/Under_forvandlingens_lov_%281911%29.webm">
</video>
</body>
Una cosa complicada es simplemente agregar la función asíncrona y esperar un segundo para obtener el estado de pausa del video.
JS
async function getStatus(singleVideo) {
return new Promise(resolve => {
setTimeout(() => {
resolve(singleVideo);
}, 1000);
});
}
function myFunction() {
var singleVideo = document.getElementById('single-video');
//Get status
getStatus(singleVideo).then(video => {
if(video.paused){
console.log("Stream pause");
$(singleVideo).hide();
}else{
console.log("Stream not pause, Just drag/click timeline");
}
});
}
"¿Es posible poder ajustar la línea de tiempo del video sin activar el evento de pausa?"
No. Este es el procedimiento estándar de funcionamiento de un navegador.
"Estoy tratando de ocultar un video cuando está en pausa, pero el evento en pausa también se activa cuando mueves la línea de tiempo en el reproductor de video".
Necesita crear sus propios controles personalizados. De esta manera, la función de su propio botón de pausa ocultaría el video, mientras que la limpieza de la línea de tiempo solo controlaría la búsqueda.
Si elige utilizar los controles integrados del navegador, tendrá que pensar de forma creativa.
Por ejemplo: cuando se usa la línea de tiempo, el evento de pause es seguido por un evento de seeking , así que solo tenga un oyente temporal para un evento de seeking durante el evento de pause . Tal "búsqueda" le permitiría saber que el video no solo está en pausa y que debería permanecer visible. Sin ningún evento adicional de "búsqueda", puede asumir que el video está realmente en paused ...
Un ejemplo del concepto:
<!DOCTYPE html>
<html>
<body>
<video id="single-video" width="640" height="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
var singleVideo = document.getElementById('single-video');
singleVideo.addEventListener("seeking", mySeek);
singleVideo.addEventListener("playing", myPlaying);
singleVideo.addEventListener("pause", myPause);
//# Your main Seek handler function (if needed)
function mySeek()
{
/* if you have custom code for during Seek events */
//alert("you did seeking..."); singleVideo.play();
}
//# During playback keep video visible
function myPlaying() { singleVideo.style.opacity="1"; }
//# Pause function also checks if a Seek event happens during Pause event
//# eg: Hide video but IF a Seek also happens during, then keep video visible
function myPause()
{
singleVideo.style.opacity="0.1"; //# hide here...
//# add temporary new Seek handler function (has alternate instructions)
singleVideo.addEventListener("seeking", mySeekInPaused);
//# force video visiblity & re-add main Seek handler function
function mySeekInPaused()
{
singleVideo.style.opacity="1"; //# keep visible
singleVideo.removeEventListener("seeking", mySeekInPaused); //# not needed now
}
}
</script>
</body>
</html>