Componente Video

Video

Componente para renderização de vídeo.

No Android, mesmo a propriedade autoPlay={true}, para que o vídeo seja reproduzido automaticamente, é necessário que muted={true}

Modifique esse componente em tempo real pelo Storybook clique aqui

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' />

Propriedades

source

• Type: String
• Obrigatório

Aceita arquivos de vídeo em formato MP4 e alguns players externos como: YouTube, DailyMotion e Vimeo. - String

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' />

width

• Type: String or Number
• Opcional

Define a largura do componente.

Aceita String ou Number como valor, exemplo: width="10%" ou width={25}.
Valor padrão: width="100%"

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' width='100%' />

height

• Type: String or Number
• Opcional

Define a altura do componente.

Aceita String ou Number como valor, exemplo: height="10%" ou height={25}.
Valor padrão: height="100%"

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' height='50%' />

controls

• Type: Boolean
• Opcional

Se esse atributo for verdadeiro, oferecerá controles para permitir o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.

Aceita somente Boolean como valor, exemplo: controls, controls={true} ou controls={false}.
Valor padrão: controls={false}

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' controls />

autoPlay

• Type: Boolean
• Opcional

O vídeo é executado automaticamente.

Aceita somente Boolean como valor, exemplo: autoPlay, autoPlay={true} ou autoPlay={false}.
Valor padrão: autoPlay={false}

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' autoPlay />

thumbnail

• Type: String
• Opcional

Imagem para a capa do vídeo enquanto não carregado.

Aceita somente String como valor, exemplo: thumbnail="capa_do_video.jpg".

Essa propriedade não é aplicada em videos de players externos, como Youtube.

Exemplo:

<Video
  source='https://s3.amazonaws.com/calindra.com.br/ame.mp4'
  thumbnail='./path/image_de_capa.jpg'
/>

muted

• Type: Boolean
• Opcional

Inicia o vídeo mutado.

Aceita somente Boolean como valor, exemplo: muted, muted={true} ou autoPlay={false}.
Valor padrão: muted={false}

Exemplo:

<Video source='https://s3.amazonaws.com/calindra.com.br/ame.mp4' muted />