Diferencia entre revisiones de «Vídeo con HTML5»
| Línea 82: | Línea 82: | ||
= Referencias = | = Referencias = | ||
| + | <div style="column-count:2;-moz-column-count:2;-webkit-column-count:2"> | ||
* [https://desarrolladoresweb.org/html5/etiqueta-video-html5-atributos-propiedades/ Video HTML5 - desarrolladoresweb] | * [https://desarrolladoresweb.org/html5/etiqueta-video-html5-atributos-propiedades/ Video HTML5 - desarrolladoresweb] | ||
* [https://www.tutorialrepublic.com/html-tutorial/html5-video.php Video HTML5 - tutorialrepublic] | * [https://www.tutorialrepublic.com/html-tutorial/html5-video.php Video HTML5 - tutorialrepublic] | ||
| Línea 87: | Línea 88: | ||
* [https://en.wikipedia.org/wiki/HTML5_video#Supported_video_and_audio_formats Formatos soportados - wikipedia] | * [https://en.wikipedia.org/wiki/HTML5_video#Supported_video_and_audio_formats Formatos soportados - wikipedia] | ||
* [https://videojs.com/html5-video-support/ Outra táboa de formatos soportados . videojs] | * [https://videojs.com/html5-video-support/ Outra táboa de formatos soportados . videojs] | ||
| + | * [https://html.spec.whatwg.org/multipage/media.html#the-video-element HTML5: The <video> element] | ||
| + | * [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] | ||
| + | </div> | ||
| + | |||
| + | == Pre-built custom controls for HTML5 video == | ||
| + | <div style="column-count:2;-moz-column-count:2;-webkit-column-count:2"> | ||
| + | * [https://videojs.com/ open source HTML5 player framework - video.js] | ||
| + | * [http://www.mediaelementjs.com/ A dependable HTML media framework - mediaelement.js] | ||
| + | </div> | ||
Revisión del 01:54 22 ago 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. |
