Tengo una biblioteca de videos donde quiero usar dinámicamente el tiempo de fragmento de medios en la URL como póster. Cuando me desplazo, intento restablecer el video al inicio inicial, para asegurarme de que el póster esté en 2 segundos (en este ejemplo específico) en lugar de 0.
this.load funciona pero crea una mala experiencia de usuario ya que todo el video se carga de nuevo.
Mi idea es definir el tiempo actual como una variable (antes de que el video comience a reproducirse) y usarlo al pausar el video.
Sin embargo, acabo de obtener "Error de referencia no detectado: posterTime no está definido".
<video id="video"> <source src="videourl.mp4#t=2" type="video/mp4"> </video> const videos = document.querySelectorAll("video") videos.forEach(video => { video.addEventListener("mouseover", function () { var posterTime = this.currentTime; this.currentTime = 0; this.play() }) video.addEventListener("mouseout", function () { this.currentTime = posterTime; this.pause(); }) })Tenga en cuenta que uso Webflow y no es muy fuerte con jQuery/Javascript.
Mientras me desplazo, necesito que vuelva a mostrar ese cuadro inicial (no el primer cuadro, sino el establecido en la URL)
Dado este requisito, puede recuperar el fragmento de la URL en el atributo src del elemento source y aplicarlo a la hora mouseleave currentTime
const videos = document.querySelectorAll("video") videos.forEach(video => { video.addEventListener("mouseenter", function() { this.currentTime = 0; this.play() }) video.addEventListener("mouseleave", function() { let src = this.querySelector('source').src; let time = (src.split('#')[1] || 't=0').split('=')[1]; this.currentTime = time; this.pause(); }) }) <video id="video"> <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4#t=5" type="video/mp4"> </video>Mi idea es definir el tiempo actual como una variable (antes de que el video comience a reproducirse) y usarlo al pausar el video. Sin embargo, acabo de obtener "Error de referencia no detectado: posterTime no está definido" .
Tu idea y código están bien, pero cometiste un error básico. Recuerde : una variable definida dentro de una función existirá solo para esa función donde fue creada.
Use let para variables internas (cuando sea posible) y use var para variables globales.
solución : defina la variable como global (fuera de cualquier función) ...
const videos = document.querySelectorAll("video"); var posterTime = -1; //# global var, with starting value... videos.forEach(video => { video.addEventListener("mouseover", function () { posterTime = this.currentTime; //# set time this.currentTime = 0; this.play() }) video.addEventListener("mouseout", function () { this.currentTime = posterTime; //# get time this.pause(); }) })