Vídeo y Audio con HTML5

Con esta documentación veras como incrustar vídeo y audio de forma fácil en tu pagina

Las etiquetas <video> y <audio> sirven para incrustar audio y vídeo, de la forma estandar de HTML5, pudiendo reproducirlo la mayoría de los navegadores actuales (incluso Internet Explorer 9).

Audio

Esta función se implementa con la etiqueta <audio> de HTML5 y se usa de forma bastante parecida a una imagen, simplemente estableciendo el atributo src ya tenemos nuestro reproductor de audio.

Como usarlo

Esta etiqueta tiene varios atributos, con los que podemos hacer visible los controles del audio, que se auto reproduzca o que entre en bucle.

1. <audio src="audio/All.mp3" controls autoplay loop></audio>

Se puede especificar varios parámetros, pero los más básicos y útiles son los siguientes:

Controls: Al especificar este atributo aparecen los controles del audio, al no establecerlo es invisible.

Autoplay: Este atributo consigue que empiece el audio con la página.

Loop: Estableciendo este atributo hacemos que entre en un bucle continuo el audio.

Vídeo

Esta etiqueta es menos estándar, ya que los distintos navegadores no implementan todos los codecs, existen 3 para esta etiqueta: el H.264, el Ogg Theora y el VP8 (WebM).
Por suerte se puede introducir el video en distintos formatos para que el propio navegador elija el adecuado.
Ejemplo de un video (De origen externo en varios formatos):

Como usarlo

Esta etiqueta incorpora los mismos atributos que la etiqueta <audio>, estableciendo la ruta del vídeo con el atributo src y pudiendo establecer si se autoinicia, se muestran los botones o entra en bucle.
Además también se puede establecer el ancho y/o alto, siendo posible dejarlos en blanco y se auto ajustará el video libremente.

1. <video src="video/h264.mov" width="1280px" height="720px" controls autoplay loop></video>

En la etiqueta <video> podemos establecer varios atributos:

Controls: Al especificar este atributo aparecen los controles del audio, al no establecerlo es invisible.

Autoplay: Este atributo consigue que empiece el audio con la página.

Loop: Estableciendo este atributo hacemos que entre en un bucle continuo el audio.

Height: Con este atributo se establece el alto del vídeo.

Width: Con este atributo se establece el ancho del vídeo.

Usarlo de forma adecuada

Dado que todos los navegadores no soportan todos los codecs de video se puede establecer varios videos en distintos formatos, usando el adecuado cada navegador.
Para hacerlo de esta forma, primero tenemos que convertir el video en los distintos formatos que soportan los navegadores (existen herramientas que transforman el vídeo a los 3 formatos adecuados a la vez como easyhtml5video.com) y depuás establecer las distintas fuentes del video con los distintos formatos.

1. <video width="1280px" controls>
   

<source src="/utilidades/video.mov" /> <!-- Codec H.264 -->


<source src="/utilidades/video.ogv" /> <!-- Codec Ogg Theora -->


<source src="/utilidades/video.webm" /> <!-- Codec VP8 (WebM) -->


2. </video>

Procedimiento paso a paso para implementar vídeo

Comentarios