API JavaScript do player
O script do embed cria window.atomicplayer na página. Use-o para ler o ponto da reprodução e mostrar um botão, um formulário ou outro bloco quando a pessoa chega a um tempo. Cada vídeo na página tem o próprio handle.
Esperar o player ficar pronto
<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>
Se o script do runtime já está na página, chame atomicplayer.ready direto. A fila acima só é necessária quando o seu script roda primeiro.
Vários vídeos
atomicplayer.players é a lista dos embeds que estão na página. atomicplayer.get(id) devolve um handle quando id é o instance id daquele embed, o id do elemento, o player id ou o video id. Se dois embeds compartilham o mesmo player id, get não devolve nada para esse id compartilhado. Use query e escolha o elemento:
const pitches = atomicplayer.query({ playerId: "PLAYER_ID" });
const sidebar = atomicplayer.get("sidebar");
Defina data-atomicplayer-instance="pitch-1" no container quando quiser um nome estável. O valor pode ter letras, números, _ e -.
O que dá para ler e chamar
| Membro | O que faz |
|---|---|
currentTime | Ponto da reprodução, em segundos. |
duration | Duração, em segundos. 0 antes da mídia ser conhecida. |
percent | currentTime como porcentagem de duration. |
paused, ended, ready | Estado da reprodução. |
play() | Inicia a reprodução. A promise é rejeitada quando o navegador bloqueia o autoplay. |
pause() | Pausa. Devolve false quando a pausa está bloqueada no Player Studio. |
seek(seconds) | Move o ponto da reprodução. Devolve false quando o seek está bloqueado, ou quando seconds não é um número finito. O tempo fica dentro do vídeo. |
on(type, fn) | Inscreve em um player. Devolve uma função que remove o listener. |
off(type, fn) | Remove esse listener. |
atomicplayer.on ouve cada embed atual e os que surgirem depois. Um listener que lança um erro não para o vídeo.
Eventos
timeupdate traz currentTime, duration, percent, paused, instanceId, playerId e videoId. Ele dispara quando o segundo inteiro muda e, entre essas mudanças, no máximo quatro vezes por segundo.
O mesmo payload vale para ready, play, pause, ended e cta. Um evento de CTA também inclui buttonId. Não inclui o rótulo do botão, o destino nem nada que a pessoa digitou.
Estes eventos de DOM continuam no container e sobem até a página: atomicplayer:play, atomicplayer:pause, atomicplayer:complete, atomicplayer:timeupdate e atomicplayer:cta. complete no DOM é ended em window.atomicplayer.
Um player dentro de um iframe também envia { type: "atomicplayer:event", signal, currentTime, duration, percent } para a página pai. A mensagem não inclui id de visitante nem URL da mídia.
Callbacks do Studio
O Player Studio ainda pode nomear uma função na página, como window.hostCallbacks.onPlay. Essa função recebe o mesmo tipo de detalhe da reprodução. Prefira window.atomicplayer quando a página tem mais de um vídeo, ou quando você precisa do tempo enquanto o vídeo toca.
Documentos relacionados
Perguntas frequentes
Posso mostrar um botão em um segundo específico?
Sim. Inscreva-se em timeupdate e compare event.currentTime com esse segundo. Esconda o botão até a comparação ser verdadeira.
Por que get não devolve nada quando dois players usam o mesmo player id?
O id é ambíguo, então a API não controla o vídeo errado. Use o id do elemento, data-atomicplayer-instance ou query.
Por que seek ou pause não fazem nada?
O Player Studio pode bloquear seek e pause. Esses bloqueios valem para esta API também. seek também rejeita um valor que não é um número finito.