Vídeo tradicional Animações

O que é

Diferente do vídeo no scroll (onde a rodinha do mouse dita a timeline), o vídeo tradicional possui seu próprio relógio interno (currentTime). Quando você aperta play, o tempo avança sozinho (0.1s, 0.2s, 0.3s…) e o hardware decodifica os quadros a 30 FPS até o fim.

Como funciona

O elemento <video> funciona como uma esteira rolante mecânica: play() liga o motor, pause() desliga e o currentTime salta diretamente para o ponto desejado na timeline. O navegador dispara eventos padronizados (loadstart, loadedmetadata, canplay, play, timeupdate, pause, ended) em cada fase da execução.

Exemplos

<!-- 
  Como o vídeo se comporta:
  01. Carregar (Poster) -> 02. Reproduzir (Relógio) -> 03. Decodificar (GPU 30 FPS) -> 04. Terminar (ended)
-->

<!-- Player com controles customizados, barra de buffer e telemetria de eventos -->
<video id="meu-video" playsinline preload="metadata" poster="garden-poster.webp">
  <source src="garden-motion.mp4" type="video/mp4">
  <track kind="captions" src="garden-captions.vtt" srclang="pt" label="Português">
</video>

<script>
  const video = document.getElementById('meu-video');
  video.playbackRate = 1.5; // Velocidade 1.5x
</script>

<!-- 1. preload="none" : Não baixa nada até clicar no play (ideal para páginas com muitos vídeos) -->
<video controls playsinline preload="none" poster="poster.webp">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- 2. preload="metadata" : Baixa só dimensões e tempo (RECOMENDADO para quase todos os casos) -->
<video controls playsinline preload="metadata" poster="poster.webp">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- 3. preload="auto" : Permite ao navegador adiantar os primeiros segundos se a rede permitir -->
<video controls playsinline preload="auto" poster="poster.webp">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Vídeo de fundo com reprodução contínua automática sem som -->
<video autoplay loop muted playsinline preload="metadata" poster="garden-mobile-poster.webp" style="width:100%; height:100%; object-fit:cover;">
  <source src="garden-mobile.mp4" type="video/mp4">
</video>

const video = document.getElementById('meu-video');

// 1. Play & Pause
video.play();
video.pause();

// 2. Velocidade de reprodução (0.5x, 1x, 1.5x, 2x)
video.playbackRate = 1.5;

// 3. Pular para 2 segundos da timeline
video.currentTime = 2.0;

// 4. Escuta de eventos essenciais
video.addEventListener('timeupdate', () => {
  console.log('Tempo atual:', video.currentTime, 'de', video.duration);
});

video.addEventListener('ended', () => {
  console.log('O vídeo terminou!');
});

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

• O arquivo deve ser codificado em MP4 (H.264 / AAC) para compatibilidade universal em 100% dos navegadores desktop e mobile.

Limitações — o que ele não faz

• No iOS e Safari Mobile, vídeos com áudio nunca iniciam em autoplay — para rodar sozinho, o atributo muted é estritamente obrigatório.
• Sempre use playsinline em vídeos inline para evitar que o iOS abra o player em tela cheia forçada ao tocar no play.