El Atributo ONPAUSE

El atributo onpause se utiliza para ejecutar código JavaScript cuando la reproducción de un elemento multimedia se pausa. Es ideal para crear interacciones personalizadas con contenido de audio/video.

Sintaxis Básica

HTML:

<elemento-multimedia onpause="miFuncion()">

Elementos compatibles: <audio>, <video>

Ejemplos Prácticos

Control Básico de Video

HTML:

<video 
    id="miVideo" 
    src="video.mp4" 
    controls
    onpause="mostrarMensaje()"
>
    Tu navegador no soporta videos HTML5.
</video>

<script>
function mostrarMensaje() {
    console.log("¡El video se ha pausado!");
    alert('Video pausado ⏸️');
}
</script>

Actualizar Interfaz de Usuario

HTML:

<video id="reproductor" src="presentacion.mp4" controls onpause="actualizarBotones()"></video>
<button id="btnPlayPause">⏯️</button>

<script>
function actualizarBotones() {
    const boton = document.getElementById('btnPlayPause');
    boton.textContent = '▶️'; // Cambia a ícono de "play"
}
</script>

Estadísticas de Pausas

HTML:

<audio src="musica.mp3" controls onpause="contarPausa()">
</audio>

<p>Pausas realizadas: <span id="contador">0</span></p>

<script>
let contadorPausas = 0;

function contarPausa() {
    contadorPausas++;
    document.getElementById('contador').textContent = contadorPausas;
}
</script>

Sistema de Comentarios en Pausa

HTML:

<video src="tutorial.mp4" controls onpause="mostrarFormularioComentario()">
</video>

<div id="formComentario" style="display: none;">
    <textarea placeholder="¿Por qué pausaste el video?"></textarea>
    <button>Enviar</button>
</div>

<script>
function mostrarFormularioComentario() {
    document.getElementById('formComentario').style.display = 'block';
}
</script>

Método Alternativo con JavaScript

JavaScript:

const video = document.getElementById('miVideo');

video.addEventListener('pause', () => {
    console.log('Video pausado mediante addEventListener');
    video.style.border = '2px solid red';
});

Casos de Uso Comunes

1. Analítica de usuario: Registrar momentos donde los usuarios pausan contenido

2. Sistemas educativos: Mostrar preguntas al pausar un video tutorial

3. Publicidad: Pausar anuncios cuando el contenido principal se detiene

4. Controles personalizados: Sincronizar botones personalizados con el estado del reproductor

Consideraciones Importantes

Diferencias entre eventos:

• onpause: Se dispara cuando el usuario pausa manualmente

• onended: Se ejecuta cuando el media termina naturalmente

Compatibilidad:

Navegador	Soporte
Chrome	✅ 4+
Firefox	✅ 12+
Safari	✅ 5+
Edge	✅ 12+

Mejores Prácticas:

• Combinar con onplay para manejar ambos estados

• Usar event.persisted si trabajas con caché

• Limpiar intervalos/animation frames al pausar

Ejemplo Avanzado: Playlist con Pausa Inteligente

HTML:

<div id="reproductor">
    <video id="videoActual" controls onpause="siguienteVideo()"></video>
</div>

<script>
const playlist = ['video1.mp4', 'video2.mp4', 'video3.mp4'];
let indiceActual = 0;

function cargarVideo() {
    const video = document.getElementById('videoActual');
    video.src = playlist[indiceActual];
    video.play();
}

function siguienteVideo() {
    if(indiceActual < playlist.length - 1) {
        indiceActual++;
        cargarVideo();
    }
}

// Iniciar
carggarVideo();
</script>

Conclusión

El atributo onpause es esencial para crear experiencias multimedia interactivas. Al dominar su uso puedes:

• Mejorar la interacción del usuario

• Recopilar datos importantes

• Crear flujos de reproducción complejos

• Desarrollar funcionalidades innovadoras

¡Experimenta con estos ejemplos y adapta el comportamiento a las necesidades de tu proyecto!