Insertar vídeos en mi sitio web

Anteriormente el introducir un vídeo dentro de nuestra pagina web era un poco tedioso ahora HTML5 introduce soporte integrado para el soporte de multimendia gracias a los elementos <video>.

Nuestro elemento cuenta con una serie de atributos que podemos utilizar segun nuestra necesidad.

Atributos

• autoplay: Especificando este atributo nuestro vídeo comenzara a reproducirse automáticamente tan pronto cargue nuestro sitio web, sin detenerse hasta la finalización de su tiempo de reproducción.
• autobufer: Es un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto.
• controls: Utilizando este atributo especificamos que deseamos tener los controles que tiene un reproductor de vídeo ,incluyendo volumen, pantalla completa, reproducir/pausar, reanudar reproducción.
• height: Con esto especificamos la altura de nuestro reproductor en nuestro sitio web.
• loop: Si se especifica este atributo, estaremos realizando un bucle infinito de nuestro vídeo, al llegar al final nuestro vídeo comenzara a reproducirse desde el principio una y otra vez.
• preload: Si especificamos este atributo su función es brindar una alternativas a nuestro usuario final en el sitio web, para obtener la mejor experiencia en este. Puede tener uno de los siguientes valores:

• none: Permite que el servidor minimice el trafico, ya que el usuario final puede no consultar este vídeo, haciendo innecesaria el almacenamiento del vídeo en la cache.

• metadatos: Sugiere que aunque el autor piensa que el usuario final no tendrá que consultar este vídeo, es razonable capturar los metadatos.

• auto: Esta sugerencia indica que, si es necesario, se puede descargar el vídeo completo, incluso aunque el usuario final no vaya a usarlo en ningun momento.

• Si la cadena es vacía: El navegador tomara este valor como auto.

• Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado).

• poster: Es una URL en la cual especificaremos la dirección de una imagen que deseemos que se muestre como póster o imagen inicial antes de que nuestro vídeo sea reproducido. Si este atributo no se especifica, no se muestra nada hasta que el primer cuadro de vídeo este disponible, al cargar el primer cuadro de nuestro vídeo este se mostrara como el marco de póster.
• src: Especificamos la dirección donde tenemos ubicado nuestro vídeo que vamos a introducir en el sitio web.
• width: Indicamos el ancho de nuestro reproductor en el sitio web.

Ver ejemplo: