Tag de vídeo em html | Explicado

Adicionar vídeos nos sites pode ser uma maneira envolvente de expressar seus pensamentos e, portanto, os vídeos podem atrair mais espectadores. Usando vídeos, pode -se fornecer alguns conceitos complicados de uma maneira muito fácil e eficaz. Portanto, o HTML fornece uma tag para incorporar um vídeo nos sites, uma tag pode ter vários atributos para controlar o comportamento de qualquer vídeo.

Este artigo apresentará um entendimento detalhado dos seguintes conceitos:

• Sintaxe da tag
• Atributos da tag
• Formatos de apoio e vídeo do navegador
• Como usar a tag em html

Sintaxe

O snippet abaixo-dado mostra a sintaxe básica da tag.

Atributos

• controles: usado para exibir as opções de controle para o usuário e.g. brincar, pausa, mudo, etc.
• SRC: determina o URL
• laço: O vídeo será reproduzido em um loop i.e. de novo e de novo.
• silenciado: Inicialmente, o vídeo será silenciado
• pré -carga: Especifique a visão do autor sobre como o vídeo será carregado quando a página da web carregar
• Reprodução automática: O vídeo será reproduzido automaticamente
• altura: usado para especificar a altura do vídeo
• largura: usado para especificar a largura do vídeo
• poster: usado para mostrar uma imagem durante o download de vídeo.

Formatos de apoio e vídeo do navegador

tag tem três formatos i.e. MP4, WEBM, OGG e esses formatos serão especificados no elemento de origem do atributo "Type". Chrome, Microsoft Edge, Opera e Mozilla Firefox suportam todos os três formatos de vídeo, enquanto o Safari e o Internet Explorer suportam apenas o formato MP4.

Vários formatos podem ser utilizados na tag, por isso é uma boa prática especificar dois formatos (OGG e MP4) na tag de vídeo para que o vídeo seja reproduzido na maioria dos navegadores. O navegador usará o primeiro formato de vídeo reconhecido. Se o navegador não reconhecer nenhum dos formatos de arquivo especificado, o texto escrito na tag inicial e final será exibido.

Como usar a tag em html

Na tag html, vários atributos podem ser usados ​​para controlar o comportamento de tags como “Controles” Ative a visibilidade dos controles i.e. brincar, pausa, etc. A seguinte parte do código elabora como usar a tag em html:

O snippet acima é exibido a seguinte saída:

Os controles são visíveis, o vídeo é silenciado, verifica que todos os atributos estão funcionando perfeitamente.

Exemplo

Agora, modificaremos o código acima para testar o funcionamento do atributo do pôster:

Agora, uma imagem será exibida no vídeo até que não cliquem no botão Play:

Da mesma forma, você pode testar o funcionamento dos atributos restantes.

Conclusão

A tag pode ser usada para adicionar um vídeo em um site, diferentes atributos podem ser usados ​​na tag de vídeo para executar diferentes funcionalidades e.g. Cartaz mostra uma imagem até que alguém clique no vídeo, o AutoPlay permite que um vídeo seja reproduzido automaticamente e assim por diante. Este artigo demonstra o que é tag html e como usar a tag. Além disso, fornece uma explicação detalhada dos formatos de vídeo e dos navegadores disponíveis.