Antes de 2014, inserir um vídeo em um site era um pesadelo técnico. O HTML5 introduziu as tags <audio> e <video>, que permitem que o próprio navegador controle a reprodução de mídia sem precisar de programas extras.
<video>)A tag <video> funciona como um container. Ela possui atributos específicos para controlar o comportamento do player.
src: Caminho do arquivo de vídeo.controls: Exibe os botões de Play, Pause e Volume (obrigatório para que o usuário tenha controle).autoplay: Inicia o vídeo sozinho (geralmente silenciado pelos navegadores por questões de experiência).loop: Faz o vídeo recomeçar infinitamente.poster: Define uma imagem que aparece antes do vídeo ser carregado.muted: Inicia o vídeo sem som.HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vídeo Básico</title>
</head>
<body>
<video src="video/aula-demonstrativa.mp4" controls width="600" poster="img/capa-video.jpg">
Seu navegador não suporta a reprodução de vídeo. </video>
</body>
</html>
<audio>)A tag <audio> segue a mesma lógica do vídeo, porém, como não possui imagem, ela não utiliza os atributos de largura (width) ou altura (height).