Skip to Content
Leitor de vídeo (embed)Configuração

O leitor de vídeo para incorporação do Ignite Video

Além de usares a nossa API extensa para construíres o teu próprio leitor de vídeo, a forma mais comum de integrar vídeos do Ignite é usar o nosso leitor de vídeo em iframe incorporável.

1. URL do iframe do leitor

Podes copiar e colar o fragmento HTML do iframe a partir da interface de administração do Ignite ou criar tu mesmo o URL do iframe, seguindo uma lógica simples. Primeiro, precisas de construir o URL base de incorporação.

O teu URL base:

https://[YOUR-IGNITE-DOMAIN]/player/index.html?id=[VIDEO-ID]

Exemplo:

https://play.ignite.video/player/index.html?id=6703e05251543798059613b3

2. Configurar o leitor

Podes configurar o comportamento e a aparência do leitor adicionando parâmetros de consulta ao URL de incorporação.

Todos os parâmetros são opcionais e têm valores predefinidos sensatos. Podes combinar vários parâmetros separando-os com & no teu URL:

?id=[VIDEO-ID]&autoplay=true&muted=true&colorPrimary=FF5500

Os parâmetros estão agrupados por caso de uso abaixo, com os grupos mais comuns primeiro. Dentro de cada grupo, os parâmetros são listados por ordem alfabética (exceto preset, que vem primeiro em Aparência porque substitui outras definições de design).

  • Reprodução — autoplay, limitQuality, loop, muted
  • Controlos do leitor — airPlay, controls, fullscreen, googleCast, lang, pip, showTranscription
  • Aparência — preset, colorBackground, colorPrimary, colorSecondary, fit, uiPadding, uiRadius
  • Legendas e idioma — captionsColorBackground, captionsColorFont, captionsOnFullscreen, captionsRadius, initCaptions

Reprodução

autoplay

  • Tipo: boolean
  • Predefinição: false

Iniciar o vídeo automaticamente quando o leitor carrega. Nota que a maioria dos browsers exige que o vídeo esteja muted para a reprodução automática funcionar.

limitQuality

  • Tipo: string
  • Predefinição: 1080p
  • Valores: 2160p, 1080p, 720p, 540p, 360p, 240p

Limita a qualidade máxima transmitida do vídeo. Útil para gestão de largura de banda ou quando queres restringir as opções de qualidade para certos casos de utilização.

loop

  • Tipo: boolean
  • Predefinição: false

Repetir a reprodução do vídeo. Quando ativado, o vídeo reinicia automaticamente do início quando termina.

muted

  • Tipo: boolean
  • Predefinição: false

Iniciar o vídeo sem som. Isto é frequentemente necessário em combinação com autoplay devido às políticas de reprodução automática dos browsers.

Controlos do leitor

airPlay

  • Tipo: boolean
  • Predefinição: false

Permitir que os utilizadores transmitam o vídeo via AirPlay (dispositivos Apple).

controls

  • Tipo: boolean
  • Predefinição: true

Mostrar ou ocultar a barra de controlos.

fullscreen

  • Tipo: boolean
  • Predefinição: true

Permitir que o vídeo seja reproduzido em modo de ecrã inteiro. Quando desativado, o botão de ecrã inteiro fica oculto.

googleCast

  • Tipo: boolean
  • Predefinição: false

Permitir que os utilizadores transmitam o vídeo via Google Cast (Chromecast).

lang

  • Tipo: string
  • Predefinição: Definição do browser

Força o idioma da interface e das legendas por predefinição. Utiliza códigos de locale standard (por exemplo, en-US, de-DE, fr-FR).

pip

  • Tipo: boolean
  • Predefinição: false

Permitir que os utilizadores usem o modo Picture-in-Picture. Quando ativo, os utilizadores podem abrir o vídeo numa janela flutuante.

showTranscription

  • Tipo: boolean
  • Predefinição: false

Mostra um botão de transcrição na barra de controlos, permitindo que os utilizadores vejam a transcrição do vídeo.

Aparência

preset

  • Tipo: string
  • Predefinição: nenhum (usa o preset de design atribuído ao vídeo na interface de administração, se existir)

Aplica um preset de design do leitor por ID. Cria presets na interface de administração Ignite e passa aqui o ID do preset para usar esse design nesta incorporação.

Isto substitui qualquer preset de design já atribuído ao vídeo. Outros parâmetros de URL (por exemplo colorPrimary ou controls) continuam a sobrepor valores individuais do preset quando os defines.

colorBackground

  • Tipo: string (hex ou rgba)
  • Predefinição: 000000

Cor de fundo dos elementos da interface. Suporta transparência através do formato rgba() (por exemplo, rgba(0,0,0,0.25)).

colorPrimary

  • Tipo: string (hex ou rgba)
  • Predefinição: D90B5A

Cor de destaque dos elementos da interface. Utilizada para estados ativos, barras de progresso e elementos interativos. Indica valores hexadecimais sem o prefixo #, ou utiliza o formato rgba().

colorSecondary

  • Tipo: string (hex ou rgba)
  • Predefinição: FFFFFF

Cor base dos elementos da interface. Utilizada para ícones e texto na barra de controlos.

fit

  • Tipo: string
  • Predefinição: contain
  • Valores: contain, cover

Altera como o vídeo se ajusta dentro da moldura do leitor.

  • contain — O vídeo é escalado para caber no leitor mantendo a proporção. Pode resultar em barras (letterboxing).
  • cover — O vídeo é escalado para cobrir toda a área do leitor mantendo a proporção. Pode resultar em corte.

uiPadding

  • Tipo: number
  • Predefinição: 12

Espaçamento interno (em píxeis) entre os controlos do leitor e as extremidades do leitor.

uiRadius

  • Tipo: number
  • Predefinição: 10

Raio das bordas (em píxeis) dos controlos do leitor. Define 0 para cantos retos.

Legendas e idioma

captionsColorBackground

  • Tipo: string (hex ou rgba)
  • Predefinição: rgba(0, 0, 0, 0.7)

Cor de fundo das cues de legendas. Indica valores hex sem o prefixo #, ou usa o formato rgba(). As preferências de legendas do navegador continuam a ter prioridade quando definidas.

captionsColorFont

  • Tipo: string (hex ou rgba)
  • Predefinição: white

Cor do texto das cues de legendas. Indica valores hex sem o prefixo #, ou usa o formato rgba(). As preferências de legendas do navegador continuam a ter prioridade quando definidas.

captionsOnFullscreen

  • Tipo: boolean
  • Predefinição: false

Quando ativado, as legendas ativam-se automaticamente quando o espectador entra em ecrã inteiro. Ao sair, desativam-se novamente, a menos que o espectador as tenha alterado durante o ecrã inteiro. Se as legendas já estiverem ativas, esta opção não faz nada.

No iPhone, o ecrã inteiro usa a apresentação de vídeo nativa do Safari. As legendas aparecem então através da UI nativa da Apple em vez do overlay personalizado do leitor.

Esta opção só responde ao controlo de ecrã inteiro do leitor (ou ao ecrã inteiro nativo no iPhone). Se a página de incorporação colocar o <iframe> em ecrã inteiro, as legendas não se ativam automaticamente — usa nesse caso o método Player.js enableTextTrack.

captionsRadius

  • Tipo: number
  • Predefinição: 6

Raio de bordo (em píxeis) das cues de legendas. Define 0 para cantos retos.

initCaptions

  • Tipo: boolean
  • Predefinição: false

Quando ativado, as legendas ficam visíveis por predefinição quando o leitor carrega.

Exemplo de parâmetros de consulta:

&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0

3. Criar o iframe

Cria um elemento iframe no teu HTML e define o atributo src para o URL que construíste no passo anterior. É importante definir alguns atributos de estilo para garantir que o leitor tem o aspeto e o comportamento que desejas.

<iframe 
  id="ignite-video-player" 
  src="https://play.ignite.video/player/index.html?id=6703e05251543798059613b3&controls=true&loop=true&muted=true&autoplay=true&fit=cover&fullscreen=false&colorPrimary=00FF00&colorSecondary=FFFFFF&colorBackground=rgba(0,0,0,0.25)&uiRadius=0&uiPadding=0" 
  width="640" 
  height="360" 
  frameborder="0"  
  style="width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto;"
></iframe>

Exemplo ao vivo

Eis um exemplo ao vivo do leitor em acção:

IntroduçãoAPI do leitor