Vídeos
Aprenda a incorporar vídeos MP4 e WebM no Jamdesk usando Markdown ou o componente Video, com propriedades de reprodução automática, loop e controles.
Armazene arquivos .mp4 ou .webm em um diretório /videos dentro do seu projeto e referencie-os diretamente. O Jamdesk renderiza um player HTML5 com controles, cantos arredondados e espaçamento consistente.
As capturas de tela mostram a interface em inglês.
Sintaxe do Markdown
O mesmo padrão  usado para imagens funciona com arquivos de vídeo. O Jamdesk verifica a extensão do arquivo e renderiza um player de vídeo em vez de uma tag <img loading="lazy">:
Essa é a maneira mais rápida de inserir um vídeo em uma página. Você obtém um player padrão com reprodução/pausa, volume, barra de progresso e tela cheia. Não são necessárias propriedades adicionais. Se quiser controlar o comportamento da reprodução (reprodução automática, loop e silenciamento), use o componente <Video>.
Componente de vídeo
O componente <Video> expõe atributos de vídeo HTML5 como propriedades, permitindo controlar o comportamento do player:
<Video src="/_jd/videos/never-gonna-give-you-up.mp4?v=msxgcgs8" title="Rick Astley" />A propriedade title define o aria-label no elemento de vídeo, que os leitores de tela anunciam quando o usuário navega até ele. Sempre inclua uma propriedade para garantir a acessibilidade.
Propriedades
| Propriedade | Tipo | Padrão | Descrição |
|---|---|---|---|
src | string | none | Obrigatória. Caminho para o arquivo de vídeo. |
title | string | none | Rótulo de acessibilidade para leitores de tela. |
controls | boolean | true | Exibe os controles integrados do player do navegador. |
autoPlay | boolean | false | Inicia a reprodução assim que o vídeo fica visível. |
muted | boolean | false | Inicia com o áudio silenciado. |
loop | boolean | false | Reinicia desde o início quando o vídeo termina. |
width | string | none | Valor de largura CSS (por exemplo, "400px", "100%"). |
height | string | none | Valor de altura CSS. |
Substituição de GIFs
GIFs animados aumentam rapidamente de tamanho: uma gravação de interface de 5 segundos pode facilmente chegar a 10 MB como GIF, mas ficar abaixo de 500 KB como MP4. Substitua GIFs por um vídeo sem áudio e em loop, ocultando os controles do player:
<Video src="/_jd/videos/ui-demo.mp4?v=msxgcgs8" autoPlay muted loop controls={false} />O resultado se parece e se comporta como um GIF (é reproduzido em linha, fica em loop contínuo e não exibe controles), mas carrega muito mais rápido e permanece nítido em qualquer resolução.
Os navegadores bloqueiam a reprodução automática com áudio. Se você definir autoPlay sem muted, o vídeo não será reproduzido; ele permanecerá no primeiro quadro sem apresentar erro. Sempre use as duas propriedades juntas.
Formatos compatíveis
| Formato | Extensão | Compatibilidade com navegadores |
|---|---|---|
| MP4 (H.264) | .mp4 | Todos os navegadores, incluindo Safari e iOS |
| WebM (VP9) | .webm | Chrome, Firefox, Edge. Arquivos menores com qualidade comparável |
MP4 é a opção padrão mais segura. Todos os navegadores e dispositivos lidam com ele. WebM gera arquivos menores, mas Safari e iOS não oferecem suporte a esse formato, o que significa que leitores em dispositivos Apple não verão nada.
Arquivos de vídeo podem ter até 100MB. Para qualquer vídeo com mais de alguns minutos, hospede-o no YouTube e use o <YouTube> component, pois a transmissão por uma CDN criada para vídeos sempre terá desempenho superior ao de servir arquivos grandes a partir da sua documentação.