Agregar videos y audios con html (COMPLETO)

Video

Con la etiqueta video es muy sencillo crear el player para reproducir video. El resultado final sería algo así:

Tenemos 3 formatos compatibles siendo el MP4 el más soportado por los navegadores:

• MP4: Compatible con Google Chrome, Mozilla Firefox, Safari e Internet Explorer.
• Ogg: Compatible con Google Chrome y Mozilla Firefox.
• WebM: Compatible con Google Chrome y Mozilla Firefox.

Sintaxis:

<video width="640" height="360" controls>

 <source src="011-html5-video-golden_gate_bridge_timelapse_hd_stock_video.mp4" type="video/mp4">

  	Tu navegador no soporta HTML5 video.

</video>

• Con <video> indicamos que vamos que se va a embeber un vídeo, podemos asignar un alto y ancho al reproductor.
• Tenemos la etiqueta con los atributos height y width para dar las dimesiones del vídeo.
• Con el atributo controls mostramos los controles del player (play, pause, volumen…).
• En la etiqueta source establecemos la ruta (src) del vídeo a reproducir y definimos el tipo (video/mp4).
• En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Atributos soportados:

A continuación una lista de los atributos disponibles, clickando en cada uno de ellos se va al post correspondiente con ejemplos prácticos:

• autoplay: Con este atributo se especifica que el vídeo comience automáticamente a reproducirse. Se puede especificar de estas 2 maneras autoplay=”autoplay” o autoplay.
• preload: En caso de omisión su valor es “auto”.  Sirve para especificar si queremos que el vídeo se vaya cargando  independientemente si se da al play o no. Aumentaría el consumo de ancho  de banda pero el usuario tendría menos cortes en la reproducción.  Tenemos 3 posibles valores para este atributo:
  — preload = “none”: El vídeo no comienza a descargarse hasta que el usuario haga play.
  — preload = “metadata”: Solo se cargan los metadatos del vídeo (dimensiones, primer frame, duración…).
  — preload = “auto”: El vídeo se descarga independientemente de la ejecución del play.
• controls:  Con este atributo especificamos si se muestran los típicos controles  del vídeo (play, stop, volumen…). Tiene 2 posibles sintaxis: controls=”controls” o controls.
• loop:  Especifica la reproducción continua del vídeo, es decir, una vez  acabada la reproducción comienza de nuevo a reproducirse. Tiene 2  posibles sintaxis: loop=”loop” o loop.
• poster: URL de la imagen a mostrar cuando el vídeo  no está disponible, está cargando y no ha comenzado su reproducción. Por  defecto es el primer frame del vídeo.
• height y width: El alto y ancho del vídeo para mostrarse en la web.
• muted: Funcionalidad para quitar el volumen al vídeo.
• mediagroup: Establece un grupo de reproducción al que pertenece el vídeo.

Audio

Con la etiqueta audio es muy sencillo crear el player para reproducir audios. El resultado sería:

Tenemos 3 formatos compatibles siendo el MP3 el más soportado por los navegadores:

• MP3: Compatible con Google Chrome, Mozilla Firefox, Safari e Internet Explorer.
• Ogg: Compatible con Google Chrome y Mozilla Firefox.
• Wav: Compatible con Google Chrome, Mozilla Firefox y Safari.

Sintaxis:

<audio controls>

 <source src="014-audio-helicoptero.mp3" type="audio/mp3">

  	Tu navegador no soporta HTML5 audio.

</audio>

La metodología es muy similar a la de video y los atributos son los mismos, de hecho ingresando a los links anteriores (los links de los atributos) van a ver que se manejan de la misma manera.

Eso fue todo y espero que haya servido el aporte, un saludo.

Fuente