Video

Apresentação

O componente Video permite a exibição de conteúdo de vídeo em diferentes formatos, incluindo vídeos locais e vídeos do YouTube. Ele oferece controles personalizáveis e suporte a diferentes configurações de reprodução.

Quando usar

• Para exibir vídeos locais em formatos como MP4
• Para incorporar vídeos do YouTube
• Quando precisar de controles personalizados de vídeo
• Para criar uma experiência de vídeo responsiva

Forma básica de uso

import { Video } from 'eitri-luminus';

// Vídeo local básico
<Video
  source="/caminho/do/video.mp4"
  width="100%"
  height="400px"
  controls
/>

// Vídeo do YouTube
<Video
  youTubeId="dQw4w9WgXcQ"
  width="100%"
  height="400px"
/>

// Vídeo com thumbnail e autoplay
<Video
  source="/caminho/do/video.mp4"
  thumbnail="/caminho/da/thumbnail.jpg"
  autoPlay
  muted
  width="100%"
  height="400px"
/>

Propriedades

Propriedade	Tipo	Descrição
source	string	URL do arquivo de vídeo local
width	string | number	Largura do vídeo
height	string | number	Altura do vídeo
controls	boolean	Exibe os controles de vídeo (play, pause, volume, etc)
autoPlay	boolean	Inicia a reprodução automaticamente
muted	boolean	Inicia o vídeo sem som
thumbnail	string	URL da imagem de preview do vídeo
type	string	Tipo do arquivo de vídeo (ex: 'video/mp4')
youTubeId	string	ID do vídeo do YouTube para incorporação
loop	boolean	Reproduz o vídeo em loop

Heranças

O componente Video herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• Para vídeos locais, é necessário fornecer a propriedade source
• Para vídeos do YouTube, use a propriedade youTubeId
• O componente é responsivo por padrão com width="100%"
• Recomenda-se sempre definir uma altura para evitar problemas de layout
• Para autoplay funcionar, o vídeo deve estar mutado (muted={true})