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

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Reproducción m3u8 embed</title>

  <link href="video-js.css" rel="stylesheet">
  <script src="video.js"></script>
  <script src="videojs-contrib-hls.js"></script>
  
</head>
<body>
  <h1>Reproducción m3u8 Embed</h1>

  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="https://rtvelivestream.akamaized.net/la1_dvr.m3u8" type="application/x-mpegURL">
  </video>
  
  <script>
  </script>
  
</body>
</html>

Ver en funcionamiento

pagina web videojs

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







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 4.8 / 5. Recuento de votos: 5

¡No hay votos hasta ahora! Sé el primero en calificar esta publicación.

No te pierdas otros artículos ...

¡Síguenos en las redes sociales!

¡Lamentamos que esta publicación no te haya sido útil!

¡Permítanos mejorar esta publicación!

¿Cuéntanos cómo podemos mejorar esta publicación?

Resumen
Reproducir fácilmente archivos m3u8 en tu página web
Nombre
Reproducir fácilmente archivos m3u8 en tu página web
Descripción
Este artículo muestra cómo se pueden reproducir direcciones m3u8 fácilmente utilizando el reproductor de vídeo VIDEOJS desde nuestra página web. Encontrarás los archivos necesarios para descargar.
Autor
sapoclay
Nombre del editor
entreunosyceros
Logo del editor
Esta entrada tiene 27 comentarios
  1. freddy

    perdon ya no funciona verdad ??’ xq intente hacer lo q dices y noo me reproduce 🙁

    1. Hola. Lo he probado y si que funciona todavía. No te olvides de descargar los archivos necesarios para que funcione (tienes en enlace para descargar los archivos necesarios en el artículo). También puedes probar este otro método con jwplayer o este otro método también con jwplayer, que también funcionan. Asegurate de que la dirección m3u8 que utilizas funciona. Espero que te sirva de ayuda. Salu2

  2. Alex Amat

    ¡Hola! Muy buenas. Me gustaría saber como puedo reproducir el vídeo automáticamente al abrir el sitio web. Tengo un sitio web y este me carga el Video.Js a la perfección. El único problema que veo es que al añadir autoplay, este no responde y sigue apareciendo el botón Play. ¡Si me pudieras ayudar estaría muy agradecido!

    Muchas gracias de antemano.

    1. sapoclay

      Hola. Puedes probar ., Pero échale un vistazo a la ayuda oficial. Espero que te sirva. Salu2 y gracias por el comentario.

  3. Diego

    hola me serviria para blogger?

    1. sapoclay

      Creo que no, pero no te lo puedo asegurar. Pruébalo y si te funciona, házmelo saber. Salu2.

  4. Alambrillo Del Gadillo

    Hola no entendí muy bien donde es que va el url de la lista? Soy novato en esto del html

    1. sapoclay

      Hola. La URL de la lista debes ponerla en la parte de código que dice < source src="http://a3live-lh.akamaihd.net/i/[email protected]/index_4_av-p.m3u8" type="application/x-mpegURL" >. Debes sustituir la url que aparece en el campo src por la que quieras utilizar. Salu2 y gracias por el comentario.

  5. Buenas copie y pegue el codigo que sale arriba coloque la url de azteca uno y no funciono en la web que tendria que hacer, me fije que estuviera funcionando en vlc,

    1. sapoclay

      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.

  6. Jc

    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

    1. sapoclay

      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.

  7. Jc

    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

    1. sapoclay

      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.

  8. aldair

    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.

    1. sapoclay

      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.

  9. COLOMBIA VS FRANCIA CARACOL TV HD


    COLOMBIA VS FRANCIA CARACOL TV HD

    separe las ultimas letras de body y html para que me deje postear pero lo tengo todo unido en el codigo de mi web

    1. sapoclay

      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é?.

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

    1. sapoclay

      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.

  11. Emilio

    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!

    1. sapoclay

      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.

  12. Emmanuel

    GENIAL me sirvio al 100% Ahora me falta ocultar la URL que no se como tendrás alguna idea

    1. sapoclay

      Me alegro que te fuese útil. Exactamente ¿en qué punto quieres ocultar la URL?

  13. 4webmasters

    aalgun tipo de codigo oculto tienes, para engañar, porque no funciona

    1. sapoclay

      Tú debes de ser muy bobo y te falta la capacidad de leer, ¿no?. Prueba a leer TODO el artículo y verás que aquí no se engaña a nadie, pedazo de SUBdesarrollado

Deja una respuesta

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