Unidad 10. Multimedia (IV)



10.3. Vídeos

En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.

Para insertar un archivo de vídeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.

1. Vídeo con HTML 5.

El formato básico de la etiqueta <video> es el siguiente.

<video> 
   <source src="archivo vídeo" type="MIME-type"/> 
</video>

La instrución típica para reproducir vídeo sería, por ejemplo:

<video  width="160" height="120" controls>
  <source src="media/cotorra.mp4" type="video/mp4"/>
  <source src="media/cotorra.ogv" type="video/ogv"/>
  Este navegador no puede reproducir este archivo de vídeo. Actualice el navegador.
</video>

 Es muy similar a la que hemos visto para sonido, salvo que aparecen los atributos de tamaño del vídeo (witdth, height). Tampoco todos los navegadores son capaces de reproducir todos los tipos de vídeo, por lo cual es conveniente colocar el vídeo en más de un formato. La compatibilidad de los tipos de vídeo con los navegadores más usados se muestra en la siguiente tabla (en marzo 2013).

Navegador MP4 WebM OGG
Internet Explorer 9+ si no no
Chrome 6+ si si si
Firefox 3.6+ no si si
Safari 5+ si no no
       
Tipo MIME video/mp4 video/webm video ogv

A continuación se ejecutará el código del ejemplo que estamos viendo, verás un reproductor de vídeo si estás utilizando un navegador compatible:

La etiqueta <vídeo> tiene varios atributos opcionales, entre los que podemos citar los siguientes:

- autoplay. Hace que el vídeo comience a reproducirse al cargarse la página. 

- loop. Para que se reproduzca una vez tras otra, sin parar.

- preload. Para que se cargue al hacelo la página especificaremos preload="auto", para que se cargue al pulsar play, preload="none".

También es posible utilizar otros reproductores y controlar la reproducción del vídeo mediante Javascript.

Si tienes acceso Creative Cloud podrás insertar la etiqueta <video> desde Insertar, Común, Media, opción HTML 5 Video, en otro caso debes hacerlo en la vista de código.

Hemos visto varios tipos de archivos de vídeos fijándonos en su extensión (.mp4, .ogv, ...) pero hay algo más que lo complica un poco. Dentro de cada uno de estos tipos de archivos el vídeo puede estar codificado de distinta forma, es lo que se conoce como Codecs. Es decir, podemos tener un archivo de vídeo ejemplo.mp4 codificado con el codec H.264 y otro archivo con el mismo nombre ejemplo.mp4 pero codificado con el codec mpeg-2. Algo similar ocurre con los archivos de audio.

Debido a esto, en ocasiones, nuestro navegador puede ser capaz de reproducir un tipo de archivo y otras ocasiones no poder hacerlo. En internet hay páginas para descargarse codecs e instalarlos en el navegador. También hay páginas que transforman un formato en otro, por ejemplo http://www.online-convert.com/, es interesante convertir los vídeos mp4 en ogv y colocarlos en los dos formatos para que se vean desde Firefox y desde la mayoría de los navegadores.

 

Marzo-2012
Atrás Inicio Adelante


Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.