|
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 >>
|
