Digamos que nuestra aplicación está usando el reproductor de video predeterminado en Safari.
Cuando un usuario está reproduciendo un video y luego intenta moverse a una posición diferente del video usando la barra de búsqueda, parece que primero se activa el evento de pause y luego se seeked los eventos de seeking y búsqueda.
Me pregunto si podemos obtener el valor de currentTime antes de la búsqueda. Por ejemplo, asumiendo que un usuario salta de t = 7 a t = 42 usando la barra de búsqueda, quiero obtener 7 como el valor de currentTime de alguna manera.
Esperaba que pudiéramos obtener este valor accediendo a la propiedad currentTime dentro del controlador de eventos de pause que se invoca justo después de la búsqueda de la siguiente manera:
const video = document.querySelector('#myvideo'); video.addEventListener('pause', () => { // I expected that the `video.currentTime` here has the "previous" position, // but it already points to the new position console.log(video.currentTime); }); pero desafortunadamente el currentValue ya se actualizó al nuevo valor en ese momento.
¿Hay alguna buena manera de lograrlo?
(EDITAR) El almacenamiento en caché de currentTime manualmente no ayuda, porque aparentemente un evento de timeupdate de tiempo se activa antes de un evento de pause . Más específicamente, tomando el siguiente código como ejemplo, cuando un usuario intenta saltar a otra posición, el cache y el currentTime impresos dentro del controlador de pause parecen siempre idénticos.
<!DOCTYPE html> <html> <body> <video id="myvideo" width="640" height="360" controls src="video.mp4" ></video> </body> <script> const video = document.querySelector("#myvideo"); let cache = 0; video.addEventListener("timeupdate", () => { cache = video.currentTime; }); video.addEventListener("pause", () => { console.log({ cache, currentTime: video.currentTime }); }); </script> </html>Creo que @Kaiido quiere decir esto cuando dice "Caché de dos valores" .
El código no está probado (pero se ve mejor que si se mantiene en la sección de comentarios)
<script> const video = document.querySelector("#myvideo"); let cache = 0; let cache_prev = 0; video.addEventListener("timeupdate", () => { cache_prev = cache; //# save last known value cache = video.currentTime; //# before updating to new currentTime }); video.addEventListener("pause", () => { console.log("cache_prev : " + cache_prev ); console.log("cache : " + cache ); console.log("currentTime : " + video.currentTime ); }); </script>