Cargando

Ir a contenido


 


HTML5 - Video

En este tutorial veremos como trabajar con el elemento vídeo, desde sus características básicas hasta poder incorporar un vídeo en nuestro documento.


Escrito por el dic 18 2013 19:50


Cuando hacemos documentos HTML muchas veces necesitamos enriquecer nuestro contenido y también muchas veces ya el uso de animaciones o efectos con Javascript no es suficiente, en estos casos debemos apelar por el contenido multimedia que se adapte a nuestras necesidades, ya sea una grabación, una canción o un vídeo.

En el caso del trabajo con multimedia, podemos utilizar audio y vídeo con la especificación de HTML5, utilizando las nuevas etiquetas de forma que no dependemos de terceros lenguajes o complementos.

Elemento vídeo

HTML5 contiene soporte para introducir vídeos como parte del documento o página que se esté realizando, sin necesidad de utilizar Flash Player u otro complemento, aumentando de esta forma la estabilidad del navegador, esto es debido a que los complementos muchas veces son la principal causa por la cual los navegadores fallan, ya que al estar en constante actualización dichos complementos pueden hacer conflicto con las nuevas funcionalidades o mejoras.

El elemento vídeo en HTML5 nos permite embeber vídeos sin requerir ayuda de un complemento, con ello podremos reproducir pequeños o grandes vídeos en nuestras páginas y enriquecer su contenido.

Para utilizar el elemento vídeo tenemos las siguientes características que debemos conocer, de forma que podamos entender el código de los próximos ejemplos.

Elemento: vídeo.
Atributos locales: autoplay, preload, controls, loop, poster, height, width, muted,
src.

Cabe destacar que este elemento es totalmente nuevo en HTML5 por lo que puede que no sea compatible con viejos navegadores.

Una vez que conocemos el elemento y sus atributos locales veamos un pequeño código de como implementar un vídeo:

<!DOCTYPE HTML>
<html>
		 <head>
				 <title>Example</title>
		 </head>
		 <body>
				 <vídeo width="360" height="240" src="timessquare.webm" autoplay controls preload="none" muted>
				 vídeo cannot be displayed
				 </vídeo>
		 </body>
</html>

Como vemos , iniciamos una etiqueta vídeo, establecemos sus parámetros de tamaño, la fuente y el src, que es donde encontramos el vídeo, en este caso debería estar en la misma carpeta que el archivo que contiene al HTML, en caso que no pueda verse el vídeo debemos mostrar un mensaje y luego cerramos la etiqueta, si hemos navegado por paginas con vídeo veremos que nos resulta todo muy familiar al ver este resultado; veamos una imagen de como debe lucir nuestro vídeo:


Como notamos es una implementación bastante limpia y funcional.

Ya supimos cuales eran los atributos locales que puede llevar la etiqueta vídeo, e incluso los pusimos a prueba en nuestro ejemplo ahora veamos que significa cada uno.

autoplay - si colocamos este atributo hará que el navegador empiece a reproducir el vídeo tan pronto como pueda.

preload - indica que el navegador debe o no precargar el vídeo dependiendo de lo que especifiquemos en este atributo.

controls - el navegador no mostrara los controles a menos que este atributo este presente.

loop - si esta presente el navegador reproducirá el vídeo en un bucle sin fin.

poster - especifica una imagen a ser mostrada mientras el vídeo se está cargando.

height - indica la altura del elemento vídeo.

width - indica el ancho del elemento vídeo.

muted - si está presente le indica al navegador que el vídeo inicialmente debe reproducirse sin volumen.

src - especifica la ruta del vídeo a reproducir.

Con esto finalizamos este tutorial, donde tuvimos nuestro primer acercamiento al elemento vídeo y como utilizarlo en un documento HTML, de esta forma tenemos una nueva herramienta para enriquecer nuestras páginas.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 18 2013 19:50
  •   Visitas 661
  •   Nivel
    Avanzado



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse