HTML5 - Vídeo avançado

Vídeo marcado de HTML5 Temos muitas opções para enriquecer nossos documentos, de forma a enriquecer nossas páginas em termos de conteúdo visual e auditivo, pelo fato de não dependermos de plugins ou terceiros, podemos manipular nossos vídeos de uma forma que nos permita atingir nossos objetivos sem problemas.
Pré-carregamento de vídeo
Ao trabalhar com conteúdo mais pesado, como vídeos, devemos ter muito cuidado para não saturar a página, pois isso ao invés de enriquecer nosso conteúdo pode atingir o efeito oposto e tornar nosso documento lento e fornecer uma experiência de navegação ruim.
Antecipando isso em HTML5 No elemento vídeo, permite-nos pré-carregar o vídeo para ser mostrado desta forma, certificando-nos de que temos um pouco de conteúdo antes de o mostrar ao utilizador e não interrompendo assim a sua experiência na nossa página.
Para isso, podemos usar os seguintes atributos:
pré-carga - é o atributo que nos permitirá usar a funcionalidade de pré-carregamento de vídeo.
Nenhum - o vídeo não carregará até que o usuário o reproduza.
metadados - apenas os metadados do vídeo serão pré-carregados, ou seja, os detalhes do vídeo, como tamanho, duração, etc.
carro - o navegador pode baixar o vídeo automaticamente conforme julgar necessário, o navegador pode até mesmo ignorar esta instrução, é o comportamento padrão.
Vamos ver um pequeno exemplo de código de como usar essa propriedade:

 Exemplo de vídeo não pode ser exibido O vídeo não pode ser exibido 

Na imagem a seguir, vemos como o navegador interpreta a chamada para o vídeo usando os atributos Nenhum Y metadados:

É importante ressaltar que devemos fazer um uso equilibrado desta propriedade, pois podemos consumir recursos desnecessariamente e também largura de banda, o que também pode se traduzir em uma péssima experiência de uso de nossa página.
Coloque uma imagem de capa para o seu vídeo
Como o vídeo é uma parte importante da nossa página, não podemos deixá-lo mostrar o primeiro quadro, pois pode quebrar o design, para isso podemos colocar uma imagem de capa ou marcador de posição, com isso podemos até controlar qual imagem mostrar caso o usuário ainda não tenha dado a ordem de reproduzir o vídeo, para isso podemos usar os atributos poster, para isso podemos ver o seguinte exemplo de código.

 Vídeo de exemplo não pode ser exibido  

Agora vamos ver um pouco como o navegador interpreta isso e como o usuário o veria:

PROLONGAR

Para conseguir esse efeito, o que foi feito foi uma captura de tela do vídeo, então com a propriedade poster podemos colocar essa imagem como a capa do nosso elemento de vídeo.
Com isso finalizamos este tutorial, com essas novas propriedades podemos controlar de uma maneira melhor a forma como podemos mostrar nossos vídeos e assim criar novos documentos mais ricos e interativos.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo