Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


Etiqueta source HTML5 para vídeo y audio

Sencillo post para repasar la etiqueta source HTML5. Su funcionalidad es la de establecer la ruta física del audio o vídeo a reproducir.

Esta nueva etiqueta se puede usar con las etiquetas video y audio:

  • video –> Extenso post sobre la etiqueta video HTML5 con sus diferentes atributos y controles.
  • audio –> Extenso post sobre la etiqueta audio HTML5 con sus diferentes atributos y controles.

Sintaxis de la etiqueta source HTML5

Veamos la sintaxis de este elemento HTML5 extraída de su web oficial:

Repasemos la sintaxis:

  • La primera línea hace referencia al uso de source para reproducir audios con formato MP3. Con el atributo src definimos la ruta del fichero mp3, mientras que con type definimos el formato del audio.
  • La segunda hace referencia al uso de source para reproducir vídeos con formato MP4. Con el atributo src definimos la ruta del fichero mp4, mientras que con type definimos el formato del vídeo.

Atributos de la etiqueta source HTML5

  • src: Con este atributo definimos la ruta del fichero a reproducir.
  • type: Con este otro definimos el formato del vídeo o audio.
  • media: Para especificar media queries.

Formatos de vídeo compatibles

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.

Los media type para referenciar cada uno de estos 3 formatos son:

  • MP4: video/mp4
  • Ogg: video/ogg
  • WebM: video/webm

Formatos de audio compatibles

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.

Los media type para referenciar cada uno de estos 3 formatos son:

  • MP3: audio/mpeg
  • Ogg: audio/ogg
  • Wav: audio/wav

Ejemplo básico de la etiqueta source en video HTML5

Vamos con este ejemplo básico para ver la etiqueta source funcionando con vídeo:

Os explico el ejemplo superior:

  • 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.

Ejemplo básico de la etiqueta source en audio HTML5

Vamos con un segundo ejemplo de la etiqueta source en audios:

Os explico el ejemplo superior:

  • Con el atributo controls mostramos los controles del player (play, pause, volumen…).
  • En la etiqueta source establecemos la ruta (src) del audio a reproducir y definimos el tipo (audio/mpeg).
  • En caso de que el navegador no soporte esta etiqueta mostramos un mensaje por pantalla.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies