Diferencia entre revisiones de «Vídeo con HTML5»

De MediaWiki
Ir a la navegación Ir a la búsqueda
 
(No se muestran 7 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
 +
= 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 é:
 +
 +
<source lang="html4strict">
 +
<video src="movie.ogg" controls="controls">
 +
</video>
 +
</source>
 +
 +
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:'''
 +
 +
<source lang="html4strict">
 +
<video src="movie.ogg" width="320" height="240" controls="controls">
 +
O seu navegador non soporta a etiqueta video de HTML5.
 +
</video>
 +
</source>
 +
 +
'''Exemplo 2:'''
 +
 +
<source lang="html4strict">
 +
<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>
 +
</source>
 +
 +
== Atributos da etiqueta video: ==
 +
 +
{| border="1" cellspacing="0" cellpadding="5" align="center"
 +
!  Atributo
 +
!  Valor
 +
!  width="100%" | Descrición
 +
|-
 +
| '''&lt;autoplay&gt;'''
 +
| autoplay
 +
| Especifica que o vídeo comezará automaticamente tan pronto estea dispoñible.
 +
|-
 +
| '''&lt;controls&gt;'''
 +
| controls
 +
| Especifica que se amosarán os controis do vídeo (play, pause, stop..).
 +
|-
 +
| '''&lt;height&gt;'''
 +
| ''pixels''
 +
| Especifica a altura en píxels do reprodutor de vídeo.
 +
|-
 +
| '''&lt;loop&gt;'''
 +
| loop
 +
| Especifica que o vídeo estará sempre reproducíndose. Cando remate volverá a comezar automaticamente.
 +
|-
 +
| '''&lt;preload&gt;'''
 +
| 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.
 +
|-
 +
| '''&lt;src&gt;'''
 +
| ''url''
 +
| Especifica a URL do vídeo a reproducir.
 +
|-
 +
| '''&lt;width&gt;'''
 +
| ''pixels''
 +
| Especifica o largo en píxels do reprodutor de vídeo.
 +
|}
  
 
= 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]
−
* [https://www.w3schools.com/tags/ref_av_dom.asp Referencia audio/video html6 - w3schools]]
+
* [https://www.w3schools.com/tags/ref_av_dom.asp Referencia audio/video HTML5 - w3schools]
 +
* [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://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]
 +
* [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>
 +
 
 +
== 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 actual del 09:18 2 dic 2022

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

Pre-built custom controls for HTML5 video

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=Vídeo_con_HTML5&oldid=20354»