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

As opções disponíveis estão organizadas nas seguintes categorias:

  • Reprodução — Controla como o vídeo é reproduzido (autoplay, loop, muted, limitQuality)
  • Controlos — Configura a interface do leitor (controls, fullscreen, pip, airPlay, googleCast)
  • Legendas e idioma — Definições de legendas e localização (initCaptions, showTranscription, lang)
  • Aparência — Personaliza o aspeto (fit, uiRadius, uiPadding, colorPrimary, colorSecondary, colorBackground)

controls

  • Tipo: boolean
  • Predefinição: true

Mostrar ou ocultar a barra de controlos.

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.

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.

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.

initCaptions

  • Tipo: boolean
  • Predefinição: false

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

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.

uiRadius

  • Tipo: number
  • Predefinição: 10

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

uiPadding

  • Tipo: number
  • Predefinição: 12

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

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.

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)).

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.

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.

airPlay

  • Tipo: boolean
  • Predefinição: false

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

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).

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.

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