---
title: Vídeos
description: >-
  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.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

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 `![alt](path)` 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>`:

```markdown
![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)
```

![Never Gonna Give You Up](/videos/never-gonna-give-you-up.mp4)

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:

```mdx
<Video src="/videos/never-gonna-give-you-up.mp4" title="Rick Astley" />
```

<Video src="/videos/never-gonna-give-you-up.mp4" 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:

```mdx
<Video src="/videos/ui-demo.mp4" 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.

<Note>
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.
</Note>

## 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](/pt/content/youtube), 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.

<Tip>
Comprima os vídeos antes de fazer commit. Ferramentas como [FFmpeg](https://ffmpeg.org/) e [Handbrake](https://handbrake.fr/) podem reduzir drasticamente o tamanho dos arquivos sem perda visível de qualidade: `ffmpeg -i input.mp4 -crf 28 -preset slow output.mp4`
</Tip>

## O que vem a seguir?

<Columns cols={3}>
  <Card title="Imagens" icon="image" href="/pt/content/images">
    Imagens Markdown, dimensões e legendas
  </Card>
  <Card title="Incorporações do YouTube" icon="youtube" href="/pt/content/youtube">
    Vídeos e Shorts do YouTube
  </Card>
  <Card title="iFrames" icon="code" href="/pt/content/iframes">
    Vimeo, CodePen, Figma e muito mais
  </Card>
</Columns>