Vídeo con HTML5
Sumario
HTML5 video
O HTML5 proporciona un estándar que nos permite amosar os vídeos de moitas das websites modernas. Ata agora non había un estándar para amosar vídeos nunha páxina web. Hoxe en día a maior parte dos vídeos amósanse empregando plugins (como Flash), sen embargo non todos os navegadores teñen os mesmos plugins.
HTML5 especifica a forma de incluír video na páxina web, coa etiqueta video.
Formatos de vídeo
Actualmente, a etiqueta video soporta dous formatos de vídeo: Ogg e MPEG 4.
Ogg=Emprega o codec Theodora e Vorbis audio. MPEG4= Emprega vídeo en formato H.264 en audio en formato AAC.
Como funciona?
Para amosar un vídeo en HTML5 o único que necesitamos é:
<video src="movie.ogg" controls="controls">
</video>
O atributo control é para engadir os botóns de play, pause e volume. Tamén é unha boa idea o incluír os atributos width e height.
Entre as etiquetas <video> </video> inseriremos a mensaxe para aqueles navegadores que non soporten o elemento video de HTML5.
Exemplos
Exemplo 1:
<video src="movie.ogg" width="320" height="240" controls="controls">
O seu navegador non soporta a etiqueta video de HTML5.
</video>
Exemplo 2:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
O seu navegador non soporta a etiqueta video de HTML5.
</video>
Atributos da etiqueta video:
| Atributo | Valor | Descrición |
|---|---|---|
| <autoplay> | autoplay | Especifica que o vídeo comezará automaticamente tan pronto estea dispoñible. |
| <controls> | controls | Especifica que se amosarán os controis do vídeo (play, pause, stop..). |
| <height> | pixels | Especifica a altura en píxels do reprodutor de vídeo. |
| <loop> | loop | Especifica que o vídeo estará sempre reproducíndose. Cando remate volverá a comezar automaticamente. |
| <preload> | preload | Especifica que o vídeo comezará a precargarse cando se cargue a páxina web. Si a opción autoplay está presente esta opción será ignorada. |
| <src> | url | Especifica a URL do vídeo a reproducir. |
| <width> | pixels | Especifica o largo en píxels do reprodutor de vídeo. |
Referencias
- Video HTML5 - desarrolladoresweb
- Video HTML5 - tutorialrepublic
- Referencia audio/video HTML5 - w3schools
- Formatos soportados - wikipedia
- Outra táboa de formatos soportados . videojs
- HTML5: The <video> element
- Everything you need to know html5 video audio - opera
- Video - diveintohtml5
- Video e audio en HTML5 - MDN
- HTML5 video - tutorialstonight
