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

top feature image

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

En este artículo voy a dejar un pequeño código. Este 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.


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

Hola amigo me sirvió mucho tu publicación gracias y tengo una duda ¿porque el reproductor se congela maso menos entre 10 minutos ? y cuando pasa yo actualizo la web para ver el canal de tv nuevamente con normalidad
hay alguna forma de que e actualice automáticamente el reproductor sin la necesidad de salir de la pantalla grande y actualizar la web eso me pasa por la mañana

posibilidades
el link de iptv esta teniendo frizezer
el reproductor web no esta actualizado o el ver vídeos por vlc reproducto es mejor

Hola. Sobre esto que comentas te digo que hay varias posibilidades.
Las posibilidades de las que hablas son las dos correctas. Tanto puede ser freezing bien sea por inestabilidad del servicio como por saturación de la línea. Sobre lo de reproducir vídeos te digo que vlc es muy buen reproductor para este tipo de enlaces, aun que la verdad no sabría decirte si es mejor que el navegador web.
Sobre lo de que se te congele el vídeo reproducido en el navegador te aconsejo que limpies la caché del navegador y si aún así se sigue congelando, trata de aumentar el valor de la caché. Aun que si dices que te pasa por la mañana quizás sea todo problema del link que reproduces y que tiene picos de uso por la mañana. Trata de buscar otro enlace y comprueba si pasa lo mismo.
Utilizar un navegador actualizado, también es una buena idea. Otro factor que deberías tener en cuenta en la calidad del vídeo que intentas reproducir y la velocidad de descarga de tu conexión, y si esta conexión es compartida o exclusiva para tu uso.

Sin más datos, esto es lo que se me ocurre por lo que comentas. Espero haberte sido de ayuda. Salu2 y gracias por comentar.

Hola si he probado y alparecer puede ser los enlaces de lo canales ahora tengo otro problemon mira yo puedo reproducir videos .m3u8 in ningun problema pero los que son asi /index.m3u8 no me funcionan y tampoco funciona los .ts pero el vlc si los reproduce sin ningun problema

Hola. Prueba a copiar la url m3u8 en una ventana nueva del navegador, y comprueba si se descarga correctamente un archivo m3u8. De ser así, debería funcionar si está correctamente formada la url. Salu2.

Hola. Además del código que sale en el post tienes que hacerte con algunos archivos más. En el artículo hay un enlace que te permite descargar todos los archivos que utilicé para que este artículo funcione. Leer los artículos ayuda un poco. Salu2.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.