API JavaScript del reproductor
El script del embed crea window.atomicplayer en la página. Úsalo para leer el punto de reproducción y mostrar un botón, un formulario u otro bloque cuando la persona llega a un tiempo. Cada video de la página tiene su propio handle.
Esperar a que el reproductor esté listo
<div class="atomic-player" id="pitch" data-player-id="PLAYER_ID"></div>
<script>
window.atomicplayer = window.atomicplayer || {};
window.atomicplayer.q = window.atomicplayer.q || [];
window.atomicplayer.q.push(function (players) {
players.ready(function (player) {
if (player.element.id !== "pitch") return;
player.on("timeupdate", function (event) {
if (event.currentTime >= 30) document.getElementById("offer").hidden = false;
});
});
});
</script>
<script async src="https://embed.atomicplayer.ai/player/v1.js"></script>
Si el script del runtime ya está en la página, llama a atomicplayer.ready directamente. La cola de arriba solo hace falta cuando tu script se ejecuta primero.
Varios videos
atomicplayer.players es la lista de embeds que están en la página. atomicplayer.get(id) devuelve un handle cuando id es el instance id de ese embed, el id del elemento, el player id o el video id. Si dos embeds comparten el mismo player id, get no devuelve nada para ese id compartido. Usa query y elige el elemento:
const pitches = atomicplayer.query({ playerId: "PLAYER_ID" });
const sidebar = atomicplayer.get("sidebar");
Define data-atomicplayer-instance="pitch-1" en el contenedor cuando quieras un nombre estable. El valor puede tener letras, números, _ y -.
Qué se puede leer y llamar
| Miembro | Qué hace |
|---|---|
currentTime | Punto de reproducción, en segundos. |
duration | Duración, en segundos. 0 antes de conocer el medio. |
percent | currentTime como porcentaje de duration. |
paused, ended, ready | Estado de la reproducción. |
play() | Inicia la reproducción. La promesa se rechaza cuando el navegador bloquea la reproducción automática. |
pause() | Pausa. Devuelve false cuando la pausa está bloqueada en Player Studio. |
seek(seconds) | Mueve el punto de reproducción. Devuelve false cuando la búsqueda está bloqueada, o cuando seconds no es un número finito. El tiempo se mantiene dentro del video. |
on(type, fn) | Se suscribe a un reproductor. Devuelve una función que quita el listener. |
off(type, fn) | Quita ese listener. |
atomicplayer.on escucha cada embed actual y los que aparezcan después. Un listener que lanza un error no detiene el video.
Eventos
timeupdate trae currentTime, duration, percent, paused, instanceId, playerId y videoId. Se dispara cuando cambia el segundo entero y, entre esos cambios, como máximo cuatro veces por segundo.
El mismo payload vale para ready, play, pause, ended y cta. Un evento de CTA también incluye buttonId. No incluye la etiqueta del botón, el destino ni nada que la persona haya escrito.
Estos eventos de DOM siguen en el contenedor y suben hasta la página: atomicplayer:play, atomicplayer:pause, atomicplayer:complete, atomicplayer:timeupdate y atomicplayer:cta. complete en el DOM es ended en window.atomicplayer.
Un reproductor dentro de un iframe también envía { type: "atomicplayer:event", signal, currentTime, duration, percent } a la página padre. El mensaje no incluye un id de visitante ni la URL del medio.
Callbacks de Studio
Player Studio todavía puede nombrar una función en la página, como window.hostCallbacks.onPlay. Esa función recibe el mismo tipo de detalle de reproducción. Prefiere window.atomicplayer cuando la página tiene más de un video, o cuando necesitas el tiempo mientras se reproduce.
Documentos relacionados
Preguntas frecuentes
¿Puedo mostrar un botón en un segundo concreto?
Sí. Suscríbete a timeupdate y compara event.currentTime con ese segundo. Oculta el botón hasta que la comparación sea verdadera.
¿Por qué get no devuelve nada cuando dos reproductores usan el mismo player id?
El id es ambiguo, así que la API no controla el video equivocado. Usa el id del elemento, data-atomicplayer-instance o query.
¿Por qué seek o pause no hacen nada?
Player Studio puede bloquear la búsqueda y la pausa. Esos bloqueos también valen para esta API. seek además rechaza un valor que no es un número finito.