La etiqueta source en HTML es una herramienta muy poderosa a la hora de trabajar con vídeos. Si aún no la has utilizado, debes saber que tiene grandes ventajas y, en este artículo, te contamos cinco de ellas.
¿Qué es la etiqueta source en HTML?
La etiqueta source en HTML se utiliza dentro de las etiquetas <picture>, <audio> y <video>. Esta etiqueta permite especificar múltiples medios de origen para un elemento de medios (imagen, audio o vídeo).
¿Por qué es importante? Esto tiene que ver con la compatibilidad y la adaptabilidad. No todos los navegadores admiten los mismos formatos de audio y vídeo, por lo que al proporcionar múltiples formatos de medios puedes asegurarte de que tu contenido sea accesible para la mayor cantidad de usuarios posible.
Además, cuando usas la etiqueta <source> dentro de la etiqueta <picture>, puedes especificar diferentes imágenes para diferentes resoluciones de pantalla. De esta manera, puedes tener una versión de alta resolución de una imagen para pantallas de escritorio grandes y una versión de baja resolución para dispositivos móviles para ahorrar ancho de banda.
Ventajas de la etiqueta source en HTML
Permite tener múltiples formatos de video en una misma etiqueta
La primera ventaja y tal vez la más importante es que la etiqueta source en HTML es el hijo directo de la etiqueta video (o audio) en HTML. Es decir, el elemento es hijo directo de video. Y es ahí donde reside su magia. Podemos tener varios elementos source en un mismo video y cada uno de ellos puede tener un atributo src con un vídeo en formato distinto.
<video controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> </video>
Esto es extremadamente útil, ya que no todos los navegadores soportan todos los formatos de vídeo. Por tanto, con este método, si un navegador no soporta el primer formato (en este caso, webm), intentará cargar el siguiente (en este caso, mp4).
Mejora la experiencia del usuario
Como hemos dicho, no todos los navegadores soportan todos los formatos de vídeo. Si solo tuviéramos un vídeo en formato webm y el navegador del usuario no lo soportara, vería un molesto mensaje de error o, peor aún, un espacio en blanco. Gracias a la etiqueta source en HTML, podremos evitar este problema. El navegador intentará cargar cada source en el orden en que aparezcan, hasta que encuentre uno que pueda reproducir.
Permite especificar el tipo de medio
Otra ventaja es que la etiqueta source en HTML tiene un atributo type que nos permite especificar el tipo de medio del archivo vinculado. Esto es especialmente útil cuando tenemos varios formatos de medios diferentes para un archivo de vídeo o audio. Por ejemplo, en el caso de un vídeo, podríamos especificar video/mp4 o video/webm. Esto puede ayudar al agente de usuario (navegador) a obtener información sobre el tipo de archivo antes de descargarlo. El valor de type debe ser un tipo MIME válido que corresponda al formato de archivo del medio.
Soporta el atributo srcset para resolución adaptativa
Si estás familiarizado con la optimización de imágenes en HTML, es probable que conozcas el atributo srcset. La etiqueta source también soporta srcset. Podemos especificar diferentes archivos de vídeo para diferentes resoluciones de pantalla usando el descriptor de ancho y el descriptor de densidad de píxeles. Esto puede mejorar significativamente la experiencia del usuario en dispositivos con pantallas de alta densidad de píxeles.
Favorece el SEO
Finalmente, pero no menos importante, usar la etiqueta source en HTML puede ser positivo desde la perspectiva del SEO. Al permitirnos proporcionar múltiples formatos de vídeo, nos aseguramos de que todos los usuarios puedan ver nuestro contenido, lo cual es un factor importante en dicho campo. Además, el uso de atributos globales, como alt y title, en los elementos source puede proporcionar contexto adicional a los motores de búsqueda.
Aprende mucho más
El apasionante y demandado mundo del desarrollo web te espera. Únete a nuestro Desarrollo Web Full Stack Bootcamp para profundizar mucho más en HTML y otros temas relacionados que te convertirán en un profesional indispensable en esta industria de la tecnología. No esperes más, da el paso que necesitas para cambiar tu vida y obtén el empleo de tus sueños.
