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, captionsOnFullscreen, captionsColorBackground, captionsColorFont, captionsRadius, 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.

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.

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 browser 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 browser continuam a ter prioridade quando definidas.

captionsRadius

  • Tipo: number
  • Predefinição: 6

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

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