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:
<!-- AUDIO -->
<source src="audio.mp3" type="audio/mp3">
<!-- VIDEO -->
<source src="video.mp4" type="audio/mp4">
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:
<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>
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:
<audio controls>
<source src="014-audio-helicoptero.mp3" type="audio/mp3">
Tu navegador no soporta HTML5 audio.
</audio>
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.