Player e embed

Copie o código abaixo e cole no HTML da sua página, exatamente no lugar onde o vídeo deve aparecer:

<iframe
  src="https://beyond.spalla.io/player/?video=SEU_ID_AQUI"
  allowfullscreen
  width="960"
  height="540"
  allow="autoplay; fullscreen; picture-in-picture"
></iframe>

Em editores de site (WordPress, Wix e similares), use o bloco de HTML personalizado / incorporar código para colar esse trecho.

Troque SEU_ID_AQUI pelo ID do seu vídeo (passo 1).

Ajuste width e height se quiser outro tamanho, em pixels. Para o vídeo preencher toda a largura disponível, use width="100%".

Salve a página e abra no navegador — o vídeo já deve estar tocando no clique de play. Para transmissão ao vivo, troque o parâmetro para ?live=SEU_ID_AQUI, ou seja: https://beyond.spalla.io/player/?live=SEU_ID_AQUI.

Escolha de onde vem o script do player.

• Via CDN (mais simples): aponte para https://beyond.spalla.io/player/spalla-player.min.js — a URL serve sempre a última versão publicada; não há como fixar uma versão específica por ela.

• Arquivo próprio (recomendado para produção): baixe o tarball da release do player (ex.: spalla-player-1.0.0.tgz) e o arquivo .sha256 ao lado. Confira a integridade e extraia:

  Copiar texto

  shasum -a 256 -c spalla-player-1.0.0.tgz.sha256
  tar -xzf spalla-player-1.0.0.tgz

  Assim você decide quando atualizar de versão e consegue conferir a integridade do arquivo — o que a URL da CDN não oferece.

Sirva os arquivos do pacote no seu site.

O WebAssembly de telemetria e multiCDN já vai embutido no spalla-player.min.js: não há arquivo .wasm separado para servir, a menos que o pacote da sua release inclua um spalla.wasm — nesse caso, hospede-o ao lado do script.

Coloque o espaço do player e o script na página:

<div id="player"></div>

<script src="spalla-player.min.js"></script>

O <div id="player"> é o retângulo onde o vídeo vai aparecer. Ele precisa existir na página antes do código do próximo passo rodar — por isso os scripts ficam no fim do corpo da página (antes de </body>).

Ligue um conteúdo ao player:

<script>
  const player = new SpallaPlayer('#player');
  player.load('SEU_ID_AQUI').catch(function (erro) {
    console.error(erro);
  });
</script>

O primeiro argumento é um seletor CSS (ou um elemento da página). O player detecta sozinho se o ID é de vídeo, live ou playlist. Qualquer opção passada no segundo argumento do construtor sempre vence o que foi configurado no backend da Spalla para aquele conteúdo.

Confirme que carregou. O evento ready só dispara depois que a mídia carrega de fato — escute também os erros:

player.on('ready', (event) => console.info('player pronto', event));
player.on('error', (e) => console.error(e));

Se algo der errado, siga o guia de solução de problemas.