El Atributo ONSEEKING

El atributo onseeking se activa cuando un usuario inicia un cambio de posición (seeking) en un elemento audio o video

El atributo onseeking se activa cuando un usuario inicia un cambio de posición (seeking) en un elemento <audio> o <video>. Es útil para detectar cuándo se está buscando una nueva posición de reproducción y gestionar acciones durante este proceso.

???? Sintaxis básica

<!-- En HTML -->
<video 
    id="miVideo" 
    src="video.mp4" 
    onseeking="manejarSeeking(event)"
></video>

<!-- En JavaScript -->
<script>
  const video = document.getElementById("miVideo");
  video.addEventListener("seeking", (event) => {
    // Lógica aquí
  });
</script>

Run HTML

???? Características clave

Se activa al inicio de una búsqueda (cuando el usuario arrastra la barra de progreso).
No se activa durante cambios programáticos (ej: video.currentTime = 10 en algunos navegadores).
Funciona junto con onseeked (que se dispara al finalizar la búsqueda).

???? Ejemplos prácticos

1. Mostrar un indicador de carga durante la búsqueda

<video 
    id="reproductor" 
    src="video.mp4" 
    controls
    onseeking="mostrarCargando()"
    onseeked="ocultarCargando()"
></video>
<div id="cargando" style="display: none;">Buscando posición...</div>

<script>
  function mostrarCargando() {
    document.getElementById("cargando").style.display = "block";
  }

  function ocultarCargando() {
    document.getElementById("cargando").style.display = "none";
  }
</script>

Run HTML

2. Registrar tiempos de búsqueda para análisis

<video id="videoAnalitica" src="contenido.mp4" controls></video>

<script>
  const video = document.getElementById("videoAnalitica");
  let tiempoInicio;

  video.addEventListener("seeking", () => {
    tiempoInicio = video.currentTime;
    console.log(`Búsqueda iniciada desde: ${tiempoInicio}s`);
  });

  video.addEventListener("seeked", () => {
    const tiempoFinal = video.currentTime;
    console.log(`Búsqueda finalizada en: ${tiempoFinal}s`);
    console.log(`Duración de la búsqueda: ${tiempoFinal - tiempoInicio}s`);
  });
</script>

Run HTML

???? Casos de uso avanzados

1. Precarga de fragmentos durante la búsqueda

video.addEventListener("seeking", async () => {
  const tiempoObjetivo = video.currentTime;
  
  // Precargar 30 segundos desde el tiempo objetivo
  const respuesta = await fetch(`/api/video?start=${tiempoObjetivo}&end=${tiempoObjetivo + 30}`);
  const buffer = await respuesta.arrayBuffer();
  
  // Almacenar en el buffer del video
  const sourceBuffer = video.sourceBuffer;
  sourceBuffer.appendBuffer(buffer);
});

2. Sistema de marcadores interactivos

<video id="videoCurso" src="clase.mp4" controls></video>
<div class="marcadores">
  <button data-tiempo="15" onclick="saltar(15)">Introducción</button>
  <button data-tiempo="90" onclick="saltar(90)">Ejercicio</button>
</div>

<script>
  function saltar(tiempo) {
    const video = document.getElementById("videoCurso");
    video.currentTime = tiempo;
  }

  video.addEventListener("seeking", () => {
    document.querySelectorAll(".marcadores button").forEach(btn => {
      btn.disabled = true; // Desactivar botones durante la búsqueda
    });
  });

  video.addEventListener("seeked", () => {
    document.querySelectorAll(".marcadores button").forEach(btn => {
      btn.disabled = false;
    });
  });
</script>

Run HTML

⚠️ Consideraciones importantes

1. Diferencias entre eventos

Evento	Descripción
`onseeking`	Inicio del cambio de posición
`onseeked`	Finalización del cambio de posición
`timeupdate`	Actualización continua durante la reproducción

2. Compatibilidad

Navegador	Soporte
Chrome	✅ 15+
Firefox	✅ 12+
Safari	✅ 6+
Edge	✅ 12+

3. Buenas prácticas

Evitar operaciones costosas: No ejecutar tareas pesadas durante seeking.
Feedback visual: Siempre mostrar un indicador de carga.
Manejar errores: Algunos navegadores no activan el evento en saltos rápidos.

???? Solución de problemas comunes

Problema: El evento no se dispara al usar currentTime:

// Forzar actualización manual si es necesario
video.currentTime = 30;
video.dispatchEvent(new Event("seeking"));

Problema: Búsqueda brusca en conexiones lentas:

video.addEventListener("seeking", () => {
  video.pause();
});

video.addEventListener("seeked", () => {
  video.play();
});

???? Conclusión

El atributo onseeking permite:

Mejorar la experiencia de usuario durante la navegación en contenido multimedia.
Implementar sistemas de precarga inteligente.
Crear interfaces más responsivas y profesionales.

Ejemplo final avanzado (Player educativo):

<video id="leccion" src="leccion.mp4" controls></video>
<div id="notas-tiempo"></div>

<script>
  const notas = {
    15: "Introducción al tema principal",
    45: "Demostración práctica",
    60: "Resumen y conclusiones"
  };

  document.getElementById("leccion").addEventListener("seeking", () => {
    const tiempo = Math.floor(video.currentTime);
    if (notas[tiempo]) {
      document.getElementById("notas-tiempo").innerHTML = `
        <div class="nota">
          <h3>Nota en ${tiempo}s</h3>
          <p>${notas[tiempo]}</p>
        </div>
      `;
    }
  });
</script>

<style>
  .nota {
    background: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #2ecc71;
    margin: 10px 0;
  }
</style>

Run HTML

Con este conocimiento, podrás crear reproductores multimedia interactivos y optimizados. ¡Experimenta con diferentes implementaciones! ????????