Diferencia entre revisiones de «Vídeo con HTML5»

De MediaWiki
Ir a la navegación Ir a la búsqueda
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 =

Revisión del 06:04 21 ago 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

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