|
Neste tutorial veremos como criar um reprodutor de vídeo.
O HTML 5 também suporta a tag <video>. A tag de vídeo HTML é usada para transmitir arquivos de vídeo, como um clipe
de filme, clipe de música na página da web.
Atualmente, existem três formatos de vídeo compatíveis com a tag de vídeo HTML:
1) mp4
2) webM
3) ogg
A tabela a seguir define qual navegador da Web suporta qual formato de arquivo de áudio.
| Navegador |
mp4 |
webM |
ogg |
| Internet Explorer |
sim |
não |
não |
| Google Chrome |
sim |
sim |
sim |
| Mozilla Firefox |
sim |
sim |
sim |
| Opera |
não |
sim |
sim |
| Apple Safari |
sim |
não |
não |
Vejamos alguns exemplos:
Exemplo 1: Usando a tag Vídeo:
Neste exemplos vamos ver o código para reproduzir o arquivo mp4 usando a tag de vídeo HTML.
Veja na imagem abaixo o resultado desse código depois de executado:
Vejamos agora os atributos da tag Video. A Tabela a seguir mostra alguns atributos que você poderá adicionar à tag Video
e melhorar o seu aplicativo:
| Atributo |
Descrição |
| controls |
Ele define os controles de vídeo que são exibidos com os botões play/pause. |
| height |
É usado para definir a altura do reprodutor de vídeo. |
| width |
É usado para definir a largura do reprodutor de vídeo. |
| poster |
Especifica a imagem que é exibida na tela quando o vídeo não é reproduzido. |
| autoplay |
Ele especifica que o vídeo começará a ser reproduzido assim que estiver pronto. |
| loop |
Ele especifica que o arquivo de vídeo será iniciado novamente, toda vez que for concluído. |
| muted |
É usado para silenciar a saída de vídeo. |
| preload |
Ele especifica a visualização do autor para carregar o arquivo de vídeo quando a página é carregada. |
| src |
Ele especifica a URL de origem do arquivo de vídeo. |
Vejamos um exemplo utilizando alguns desses atributos:
Exemplo 2: Neste exemplo vamos utilizar alguns atriutos para executar o vídeo automaticamente quando o código for
executado e redimensioar o tamanho do vídeo:
Veja na imagem abaixo o resultado desse código depois de executado:
<< Tutorial para Criar um Áudio Player
Tutorial para Criar um Botão com Imagem em Formulários >>
|
