Reproducir fácilmente archivos m3u8 en tu página web

top feature image

En este artículo voy a dejar un pequeño código que nos permitirá disponer de otra opción para reproducir archivos m3u8 en nuestras páginas web. Hace ya algunas semanas escribí un artículo para el mismo fin, pero utilizando JWPlayer. En esta ocasión vamos a utilizar VIDEOJS, que es más sencillo de utilizar. Tengo que aclarar que tarda un poco más en realizar la conexión y empezar la reproducción del vídeo.

Podemos ver una visión general de cómo empezar a usar VIDEOJS, desde el uso básico de CDN a Browserify, junto con ejemplos en la siguiente página web. Podremos utilizar este framework para reproducir todo tipo de vídeos en nuestras páginas web. Aun que el objetivo de este artículo es reproducir una url que aloja un archivo m3u8.

Reproduce archivos m3u8 con VIDEOJS

pagina web videojsPuede cambiar la apariencia del reproductor a través de las tecnologías de reproducción simplemente editando un archivo CSS. La documentación de skins le da una introducción a cómo se forman el HTML y CSS de la piel predeterminada. Para obtener una lista de skins puedes consultar la wiki de video.js. Se puede consultar la documentación oficial para la instalación de este framework desde su página web.

El resultado final de este código se puede ver funcionando en el siguiente enlace. Si quieres descargarte el código (en el que incluyo los archivos .js y .css para que todo funcione correctamente) puedes hacerlo desde aquí. Como siempre he utilizado un acortador. Hay que esperar 5 segundos antes de poder acceder a la descarga.


13 Comments

Excelente aportación, imagino que el comentario anterior se refiere a que si das a copiar la dirección de video obtienes la ruta completa del m3u8 y no querrá que se pueda obtener. Un saludo!

Hola. En primer lugar gracias por el comentario. Y la verdad es que así en frío lo primero que se me ocurre es deshabilitar el uso del botón derecho del ratón en la página en la que pongas el vídeo. Pero supongo que habrá mejores opciones. Salu2.

Hola, colega que pena nesecito ayuda,,, me sale The media could not be loaded, either because the server or network failed or because the format is not supported

ya puse el URL, tanto m3u y .ts y nada ya subi los 4 archivos y nada aun

Hola. Si me dices que has probado a cambiar la url que se debe de reproducir (asegurándote de que es una url que emite correctamente) y que has subido los archivos necesarios ubicándolos en la ruta correcta, lo que se me ocurre es modificases algo del código (por que el archivo index.html va dentro del archivo .rar que se puede descargar desde el artículo). Tal cual está en ese paquete está funcionando en la página de muestra que pongo en el post. Asegurate de que no estés utilizando un navegador demasiado antiguo. A mi con firefox 59 me funciona correctamente.
Salu2.

Hola. La url que me enviaste con tu whatsapp no funciona.
Te digo que los archivos los debes subir al servidor separados. Descomprime el archivo rar y sube los archivos que hay dentro. En el código los archivos video.js y videojs-contrib-hls.js van sin el protocolo https:// ya que los archivos se van a alojar en el hosting donde subas los archivos, en la misma carpeta donde está index.html.
¿No sé si me expliqué?.

Hola, yo no controlo mucho de códigos. Ya tengo el archivo m3u8 (funcionando) y he descargado el archivo rar. con (video.js, index.html, etc) tengo que subir esos archivos en mi pagina web? utilizo Filezilla, como los subo o en que carpeta los subo?

Espero que me haya explicado bien.

Hola. Coge todos los archivos que hay dentro de la carpeta .rar y súbelos a una carpeta dentro de tu web utilizando Filezilla. Después solo tienes que acceder a la url de la carpeta que has alojado en tu web. Y si la dirección m3u8 que tiene funciona, pues deberías verlo sin problemas.
Salu2.

Deja un comentario