Diferencia entre revisiones de «Vídeo con HTML5»
| (No se muestran 2 ediciones intermedias del mismo usuario) | |||
| Línea 10: | Línea 10: | ||
Actualmente, a etiqueta video soporta dous formatos de vídeo: Ogg e MPEG 4. | Actualmente, a etiqueta video soporta dous formatos de vídeo: Ogg e MPEG 4. | ||
| − | Ogg=Emprega o codec Theodora e Vorbis audio. | + | * Ogg=Emprega o codec Theodora e Vorbis audio. |
| − | MPEG4= Emprega vídeo en formato H.264 en audio en formato AAC. | + | * MPEG4= Emprega vídeo en formato H.264 en audio en formato AAC. |
== Como funciona? == | == Como funciona? == | ||
| Línea 91: | Línea 91: | ||
* [https://dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ Everything you need to know html5 video audio - opera] | * [https://dev.opera.com/articles/everything-you-need-to-know-html5-video-audio/ Everything you need to know html5 video audio - opera] | ||
* [http://diveintohtml5.info/video.html Video - diveintohtml5] | * [http://diveintohtml5.info/video.html Video - diveintohtml5] | ||
| + | * [https://developer.mozilla.org/es/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content Video e audio en HTML5 - MDN] | ||
| + | * [https://www.tutorialstonight.com/html/html-video HTML5 video - tutorialstonight] | ||
</div> | </div> | ||
Revisión actual del 09:18 2 dic 2022
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
