Multimídia e Embeds

Áudio e Vídeo HTML5

HTML5 trouxe suporte nativo a áudio e vídeo sem plugins externos.

Áudio

<audio controls preload="metadata">
  <source src="musica.ogg" type="audio/ogg">
  <source src="musica.mp3" type="audio/mpeg">
  <p>Seu navegador não suporta áudio HTML5.</p>
</audio>

const audio = document.querySelector('audio');

audio.addEventListener('loadedmetadata', () => {
  console.log(`Duração: ${audio.duration}s`);
});

document.querySelector('.play-btn').addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
  } else {
    audio.pause();
  }
});

Vídeo com Legendas

<video controls poster="thumb.jpg" width="640" preload="auto">
  <source src="filme.mp4" type="video/mp4">
  <source src="filme.webm" type="video/webm">

  <!-- Legendas -->
  <track
    src="legendas-pt.vtt"
    kind="subtitles"
    srclang="pt-BR"
    label="Português"
    default
  >
  <track
    src="legendas-en.vtt"
    kind="subtitles"
    srclang="en"
    label="English"
  >
</video>

video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

video::-webkit-media-controls {
  background: rgba(0,0,0,0.5);
}

Canvas

<canvas id="meuCanvas" width="400" height="300">
  Seu navegador não suporta Canvas.
</canvas>

const canvas = document.getElementById('meuCanvas');
const ctx = canvas.getContext('2d');

// Retângulo preenchido
ctx.fillStyle = '#3498db';
ctx.fillRect(50, 50, 200, 100);

// Círculo
ctx.beginPath();
ctx.arc(300, 150, 40, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();

// Texto
ctx.font = 'bold 24px Arial';
ctx.fillStyle = '#2c3e50';
ctx.fillText('Canvas HTML5', 50, 230);

// Linha
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.lineTo(350, 250);
ctx.strokeStyle = '#2ecc71';
ctx.lineWidth = 4;
ctx.stroke();

SVG Inline

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#3498db" stroke="#2980b9" stroke-width="4"/>

  <rect x="60" y="60" width="80" height="80" fill="rgba(255,255,255,0.3)" rx="8"/>

  <text x="100" y="110" text-anchor="middle" fill="white" font-size="20">
    SVG
  </text>
</svg>

svg {
  max-width: 100%;
  height: auto;
}

svg circle {
  transition: fill 0.3s ease;
}

svg:hover circle {
  fill: #e74c3c;
}

Iframes com Segurança

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Vídeo Tutorial"
  width="560"
  height="315"
  loading="lazy"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Lab: Player Multimídia Customizado

Crie uma página com player de vídeo, canvas animado e SVG interativo. Adicione controles customizados de play/pause e volume.

# Gerar legendas VTT de exemplo
@"
WEBVTT

00:00:01.000 --> 00:00:05.000
Bem-vindo ao tutorial!

00:00:06.000 --> 00:00:10.000
Aprenda HTML5 Multimídia.
"@ | Set-Content -Path "legendas.vtt"

Multimídia na web moderna é nativa, acessível e performática — sem Flash, sem plugins, sem desculpas.