Introducir vídeo con html5 en página web

HTML5 nos permite introducir video de una forma muy sencilla y con una serie de propiedades muy completas gracias a sus nuevas etiquetas.

Introducir video es como introducir una imagen. Hay que subir el archivo al servidor y especificar la ruta que debe seguirse para mostrar el elemento.

La etiqueta empleada será <video> … </video>. Al igual que la <canvas> … </canvas> que hemos visto en posts anteriores, puede contener cierta información para el caso de que no se vea su contenido (porque no pueda reproducirse, por ejemplo), por lo que conviene introducir entre medias un texto avisando al visitante de por qué no se le visualiza el elemento. Algo así como:

<video src="nombre_video.mp4">
	<p>El navegador usado no puede reproducir este video, si quieres, puedes descargarlo:
	<a href="nombre_video.mp4">AQUÍ
	</p>
</video>

Otro problema puede surgir con los codecs, ya que hay multitud de ellos y cada navegador emplea unos, para solucionar esto, vamos a tener el atributo <source>, con el que podremos especificar qué codecs queremos emplear. Este atributo se encuentra también dentro de la etiqueta video y tendrá una estructura similar a esto:

<video control>
	<source src="nombre_video.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40">
	<source src="nombre_video.ogv" type="video/ogv" codecs="theora, vorbis">
	<p>El navegador usado no puede reproducir este video, si quieres, puedes descargarlo:
	<a href="nombre_video.mp4">AQUÍ
	</p>
</video>

Por último, veremos unos atributos para ésta nueva etiqueta de html5. Me limitaré a listarlos y dar una breve explicación de cada uno de ellos:

  • height: altura del vídeo en pixels.
  • width: ancho en pixels del vídeo.
  • controls: ésta etiqueta nos permitirá especificar si queremos que los controles del vídeo (play, stop…) se muestren o permanezcan ocultos.
  • autoplay: etiqueta recomendada desde mi punto de vista, con ella, el vídeo comenzará a reproducirse en el momento en que esté completamente cargado.
  • poster: otra etiqueta recomendada si se emplea junto con al anterior. Nos servirá para determinar una imagen que se muestre mientras el vídeo se termina de cargar o hasta que el usuario pulse play.
  • loop: con ella especificamos si el video debe realizar una reproducción eterna o circular, esto es que comience de nuevo en el momento en que finalice la reproducción, no recomendable desde mi punto de vista debido a que la gente acaba cansándose de tener un video igual reproduciéndose eternamente.
  • muted: otra etiqueta no muy útil, nos sirve para determinar si el audio del vídeo estará encendido en el momento de su reproducción o no…

Y con esto finalizamos el tutorial de cómo introducir audio en nuestra página web gracias a las nuevas etiquetas de html5. Si me falta alguna o queréis una muestra de cómo usarlas, o cualquier otra cosa, no dudéis en comentar. Gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: