Google+ Insertar y reproducir vídeo con html5 en sitio web - tutorial - Miopiblog

miércoles, 9 de enero de 2013

Insertar y reproducir vídeo con html5 en sitio web - tutorial

En este tutorial, te voy a enseñar como tienes que utilizar las etiquetas <video> para insertar un vídeo en tu sitio web, utilizando html5.  Vas a aprender a colocar controles a un vídeo con html5, a indicar si quieres que un vídeo insertado con html5 comience a reproducirse automáticamente cuando la página web ha cargado, a colocar una imagen de portada o poster para que se vea antes de que el vídeo hmtl5 se ponga en marcha... y mucho más, espero que te guste el pequeño tutorial que te ofrezco sobre vídeos y html5. Valoro mucho vuestros comentarios, por lo que te animo a dejarlos más abajo.

Hasta hace poco tiempo, la manera más utilizada de insertar vídeos en un sitio web, era haciéndolo mediante flash o el código <iframe> de youtube. Poco a poco, las cosas van cambiando, y al parecer nuestro buen aliado html5, está finalmente ocupando su lugar correspondiente en el terreno de los vídeos: el trono de nuestro sitio web; esto me alegra. Es sumamente fácil insertar un vídeo mediante html5 en un sitio web, las etiquetas <video> son muy útiles para nosotros.



Como ya sabrás (y si no lo sabes, te lo digo yo, jeje!!!), los vídeos deben estar representados principalmente por las etiquetas <video></video> siempre que estés creando o editando un sitio web mediante html5. Es decir, para introducir un vídeo en tu sitio web, debes hacerlo entre estas etiquetas, como te explico en este tutorial:


<video></video>

Debes colocar el código html5 de inserción del vídeo, principalemente entre las etiquetas <body> y </body> de tu sitio web, justo donde quieres que aparezca éste. Por ejemplo, yo en este sitio web, quiero mostrar el vídeo html5 en la columna central izquierda; pues coloco el código de inserción html5 en ese lugar.
En definitiva, una estructura simple de sitio web creado en html5, al que acabamos de insertar un vídeo, podría quedar así:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Insertando video html5</title>
    </head>
    <body>
        <section>
        <video>
     <!----- Aquí va el vídeo ----->
        </video>
        </section>
    </body>
</html>

Ahora tenemos que añadir, la etiqueta <source/> dentro de <video>. Por lo tanto quedaría así:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Insertando video html5</title>
    </head>
    <body>
        <section>
        <video>
   <source/>
        </video>
        </section>
    </body>
</html>
Nota: se puede insertar el vídeo directamente dentro de <video>, sin la etiqueta <source> pero es mejor hacerlo así para seguir los estándares marcados por la W3C y que el "Markup validation service" de esta entidad, considere nuestro documento html5 por válido al analizarlo. "type", por ejemplo, no se acepta como válido ya que si se introduce directamente en <vídeo>, sale el siguiente mensaje de error al validar código:   Attribute type not allowed on element video at this point. 


Muy bien, hasta aquí todo muy fácil, no? jeje!!! ok, pues seguimos con lo fácil. Le vamos a dar un ancho y una altura a nuestro vídeo, además, vamos a añadir controles. Para el ancho utilizamos "width" y para la altura "height", por otro lado, para indicar que queremos que los controles sean visibles, añadimos la palabra "controls". Nuestro código va quedando así:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Insertando video html5</title>
    </head>
    <body>
        <section>
        <video width="305" height="230"  controls>
   <source/>
        </video>
        </section>
    </body>
</html>

A continuación, vamos a añadir  dentro de la etiqueta <source/> la ruta hasta el vídeo o la dirección web de éste y vamos a indicar el tipo de vídeo que es: utilizaremos "src" y "type". En "src" debes especificar la ruta que se debe seguir hasta el vídeo o la dirección web en la que está alojado el vídeo (ejemplo: src="videos/mivideo1.mp4"). El atributo "type", sirve para indicar el tipo de vídeo que queremos reproducir, podría quedar así:


<!DOCTYPE html>
 
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <title>Insertando video html5</title>
    </head>
    <body>
        <section>
        <video width="305" height="230"  controls>
   <source type="video/mp4" src="http://benidormexperineces.comli.com/mostrar%20y%20ocultar%20un%20div%20con%20jquery%20-%20evento%20slidetoggle.mp4" />
        </video>
        </section>
    </body>
</html>

Si lo has hecho todo vien, se debería ver un vídeo como el de este ejemplo de web html5, en tu sitio web.


¿Has visto que fácil? Se le pueden añadir varios atributos más, bastante interesantes y útiles. Por ejemplo, si introduces la palabra "autoplay" dentro de la etiqueta <video>, el vídeo comienza a reproducirse automáticamente tras cargar la página.  Aquí te muestro una lista con algunos de esos atributos:


  • src - sirve para indicar la dirección o ruta de carga del vídeo.
  • autoplay  - el vídeo comienza a reproducirse automáticamente.
  • controls - los controles del vídeo hmtl5 son visibles.
  • preload - "auto/metadata/none" - cargar todo el vídeo, cargar los metadatos o no cargar nada.
  • poster- imagen que se verá antes de que comience la reproducción del vídeo html5.
Otra cosa, si sabes un poco de javascript, puedes controlar tu vídeo html muy fácilmente. Mira esto:


<button onclick="document.getElementById('video1').play()">comenzar a reproducir el video</button>
<button onclick="document.getElementById('video1').pause()">parar el video</button>
<button onclick="document.getElementById('video1').volume+=0.1">Subir volumen</button>
  <button onclick="document.getElementById('video1').volume-=0.1">Bajar volumen</button>
</div>

Hay mucho más sobre las etiquetas <video> y </video> de html5 y su uso, te invito a descubrirlo visitando este link sobre vídeos y html5.

Si quieres estar al día sobre nuevas actualizaciones y publicaciones de contenido en Miopiblog, relacionado con html5, puedes suscribirte a mi newsletter o seguirme en las redes sociales.

Un saludo!!!

Seguidores (seguir blog)

Me siguen en google plus: