Hola a todos,
En esta entrada quiero compartir un ejemplo técnico que puede ser útil para quienes están aprendiendo sobre desarrollo web o análisis de contenido multimedia embebido en HTML5. Como ejemplo de caso real, usaré el reproductor de video de Cumlouder, que utiliza HTML5 para mostrar su contenido.
Algunos sitios como Cumlouder insertan sus videos usando la etiqueta <video> de HTML5 junto con una o varias etiquetas <source>. Desde el punto de vista técnico, es interesante analizar cómo estos elementos están organizados y cómo se puede acceder a esa información desde el DOM del navegador.
Espero que este pequeño análisis les resulte útil para entender cómo se integran reproductores de video en la web moderna.
¡Saludos!
En esta entrada quiero compartir un ejemplo técnico que puede ser útil para quienes están aprendiendo sobre desarrollo web o análisis de contenido multimedia embebido en HTML5. Como ejemplo de caso real, usaré el reproductor de video de Cumlouder, que utiliza HTML5 para mostrar su contenido.
¿Por qué es interesante?
Algunos sitios como Cumlouder insertan sus videos usando la etiqueta <video> de HTML5 junto con una o varias etiquetas <source>. Desde el punto de vista técnico, es interesante analizar cómo estos elementos están organizados y cómo se puede acceder a esa información desde el DOM del navegador.
Cómo hacerlo:
- Ve a cualquier video en la web (por ejemplo, un video de Cumlouder).
- Abre las herramientas de desarrollador (F12) y localiza el elemento <video> (en Cumlouder suele tener el ID cum_player_html5_api).
- Allí encontrarás un <source> con la URL del archivo .mp4.
- Ejecuta este código en la consola del navegador para ver el enlace del archivo de video (en el caso de que sea un video de Cumlouder):
console.log(document.getElementById('cum_player_html5_api')?.querySelector('source').src); - Pincha en el enlace que te aparecerá en la consola para ver el video.
Espero que este pequeño análisis les resulte útil para entender cómo se integran reproductores de video en la web moderna.
¡Saludos!
Última edición:
