Como Incorporar Vídeo no React

Incorporar vídeo numa aplicação React parece simples até nos depararmos com autoplay quebrado, um iframe não responsivo ou uma tag <embed> que simplesmente não funciona. Este guia aborda as duas abordagens mais práticas: o elemento HTML5 nativo <video> para ficheiros auto-hospedados e embeds via <iframe> para plataformas como YouTube e Vimeo. Bibliotecas de terceiros são mencionadas onde realmente acrescentam valor, não como opção por defeito.

Método 1: Vídeo HTML5 no React para Ficheiros Auto-Hospedados

Se controla o ficheiro de vídeo, o elemento nativo <video> é a ferramenta correta. Não é necessária nenhuma biblioteca.

import myVideo from './assets/demo.mp4';

export default function VideoPlayer() {
  return (
    <video
      width="100%"
      style={{ aspectRatio: '16/9' }}
      controls
      playsInline
      muted
    >
      <source src={myVideo} type="video/mp4" />
      <track
        kind="subtitles"
        src="/captions/demo.en.vtt"
        srcLang="en"
        label="English"
        default
      />
      Your browser does not support the video tag.
    </video>
  );
}

Alguns aspetos a ter em conta:

• autoPlay requer muted para funcionar de forma fiável nos navegadores modernos. Chrome, Safari e Firefox bloqueiam por defeito o autoplay com som. Não assuma que funcionará sem muted. Note que em JSX o atributo é em camelCase, autoPlay, e não autoplay. O suporte dos navegadores e as políticas de autoplay estão documentados no Can I Use.
• playsInline é obrigatório no iOS para impedir que o vídeo abra automaticamente em ecrã inteiro.
• <track> adiciona legendas ou subtítulos. Esta é a forma correta de tratar a acessibilidade em conteúdo de vídeo, e é algo que se descura facilmente.
• O texto de fallback dentro de <video> apenas aparece em navegadores muito antigos que não reconhecem o elemento. Ainda assim, vale a pena incluí-lo.

Para formatos de streaming adaptativo como HLS (.m3u8), o suporte nativo do navegador varia. O Safari lida com HLS nativamente, mas o Chrome e o Firefox requerem uma biblioteca como o hls.js para interpretar e reproduzir o stream.

Embed do YouTube em React: Utilizando um iframe

Para YouTube ou Vimeo, um <iframe> é a abordagem padrão. Não precisa de um pacote específico para React para isto.

export default function YouTubeEmbed({ videoId }) {
  return (
    <div style={{ aspectRatio: '16/9', width: '100%' }}>
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube-nocookie.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ border: 'none' }}
      />
    </div>
  );
}

Detalhes essenciais:

• Utilize youtube-nocookie.com em vez de youtube.com no URL de embed. Este é o modo de privacidade reforçada do YouTube, que reduz os cookies de rastreamento até que o utilizador interaja com o player.
• title é obrigatório em iframes para leitores de ecrã. Sem ele, as tecnologias de assistência não conseguem descrever o conteúdo incorporado.
• aspectRatio: '16/9' no contentor com width: 100% e height: 100% no iframe é a abordagem responsiva mais limpa, recorrendo a CSS moderno. Sem necessidade de hacks com padding. O suporte dos navegadores para a propriedade CSS aspect-ratio está disponível no Can I Use.
• O formato do URL de embed é https://www.youtube-nocookie.com/embed/{VIDEO_ID}. O ID do vídeo é o valor do parâmetro de query v num URL padrão do YouTube (por exemplo, a parte após ?v= em youtube.com/watch?v=VIDEO_ID).

Pode passar parâmetros adicionais através da query string:

/embed/VIDEO_ID?controls=1&rel=0

Quando Utilizar uma Biblioteca de Player de Vídeo para React

Para a maioria dos casos de uso, o elemento nativo <video> ou um simples iframe é suficiente. Considere uma biblioteca como o ReactPlayer se precisar de suportar múltiplas plataformas (YouTube, Vimeo, Wistia, HLS, DASH) a partir de um único componente com uma API unificada, ou se precisar de callbacks de eventos como onReady, onProgress ou onEnded em diferentes fornecedores.

O ReactPlayer adiciona um peso considerável ao bundle, por isso vale a pena avaliar se realmente precisa dessa flexibilidade antes de o adicionar como dependência.

Conclusão

Comece pela ferramenta mais simples que resolve o problema. Para vídeo auto-hospedado, utilize o elemento HTML5 <video> com controls, playsInline e muted se for necessário autoplay. Para embeds do YouTube no React, um <iframe> simples a apontar para youtube-nocookie.com com um atributo title adequado é tudo o que precisa. Recorra a uma biblioteca apenas quando a abordagem nativa for genuinamente insuficiente.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.