Colocar um vídeo em HTML5 é simples, não mais complexo para qualquer navegador do que colocar uma imagem. Neste artigo, vamos aproveitar ao máximo o suporte embutido ao navegador para criar o player de vídeo mais simples possível.

Colocaremos a estrutura básica do aplicativo e, em seguida, usaremos

Pré-requisitos

Use o Chrome, Safari ou o Internet Explorer 9 ou superior. Por enquanto, você terá que evitar o Firefox e o Opera por causa dos problemas de formato de arquivo de vídeo entre navegadores. Embora o suporte para o elemento de vídeo seja consistente em todos os navegadores modernos, o formato MP4 ativa o Firefox e o Opera. Você pode verifique a compatibilidade aqui.

Antes de começar, você precisará encontrar um .mp4 que você pode usar, se você não tiver um, você encontrará muitos arquivos mp4 grátis online.

Construindo o quadro básico

O código a seguir é o framework em torno do qual você constrói o player. Cria um layout simples e tem um espaço reservado para o vídeo em si.

Você precisa criar um novo arquivo HTML em seu diretório de trabalho e nomeá-lo como index.html e, em seguida, incluir este código:

HTML5 Video Player

Agora, com a base estabelecida, vamos à parte divertida do player adicionando um vídeo à página.

Usando o elemento de vídeo para adicionar vídeos a páginas da web

O objetivo na criação de HTML5

Veja como é um vídeo em HTML5 no Chrome:

A próxima listagem mostra todo o código necessário para exibir o vídeo. Como você pode ver, não é complicado.

Insira este código no lugar do “ ”Comente no código acima, certifique-se de substituir [SEU VÍDEO] pelo caminho para o seu .mp4 e atualize a página.