Inicio Informática Reproducir fácilmente archivos m3u8 en tu página web

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

Publicado por entreunosyceros
Publicado el: Última actualización:

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

31 Comentarios

juan andres 17 marzo, 2022 - 6:26 AM

como hago para que se reprodusca solo

Respuesta
entreunosyceros 17 marzo, 2022 - 1:17 PM

Hola. Me parece recordar que bastaba con añadir autoplay (tal cual, sin opciones) en la etiqueta video. Salu2

Respuesta
Leonardo Viana 10 octubre, 2021 - 11:31 AM

buenos dias gracias por el post, quisiera saber como hago para que me funcione en un servidor local, utilizo xampp, lo puse una carpeta en httdocs que dice reproductor, adentro puse el index.html y cree dos carpeta mas una para css y otra para js pero no me funciona. No se que hice mal.
Si me podes ayudar agradecido

Respuesta
entreunosyceros 10 octubre, 2021 - 11:42 PM

Hola. ¿Qué error muestra? ¿Has descargado los archivos desde el enlace que aparece en el artículo?… por que si no recuerdo mal, los archivos no están en carpetas, por lo que no tendrías necesidad de crear ninguna carpeta … Tan solo tendrías que mover el paquete (una vez descomprimido) a htdocs. Y si los pones en carpetas, asegurate de escribir correctamente la dirección a estos archivos css y js dentro del Index.html.

Igual es un pregunta un poco tonta, pero ¿has arrancado el servidor Xampp?

Salu2.

Respuesta
freddy 19 octubre, 2020 - 9:18 AM

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

Respuesta
entreunosyceros 19 octubre, 2020 - 11:40 PM

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

Respuesta
Alex Amat 29 noviembre, 2018 - 6:38 PM

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

Respuesta
sapoclay 30 noviembre, 2018 - 12:10 AM

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

Respuesta
Diego 28 noviembre, 2018 - 5:48 PM

hola me serviria para blogger?

Respuesta
sapoclay 28 noviembre, 2018 - 5:58 PM

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

Respuesta
Alambrillo Del Gadillo 14 octubre, 2018 - 11:30 PM

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

Respuesta
sapoclay 14 octubre, 2018 - 11:36 PM

Hola. La URL de la lista debes ponerla en la parte de código que dice < source src="http://a3live-lh.akamaihd.net/i/lasexta_1@35272/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.

Respuesta
pokertmbolivar (@pokertmbolivar) 25 junio, 2018 - 7:24 PM

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,

Respuesta
sapoclay 26 junio, 2018 - 12:52 AM

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.

Respuesta
Jc 27 abril, 2018 - 10:40 AM

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

Respuesta
sapoclay 27 abril, 2018 - 4:23 PM

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.

Respuesta
Jc 26 abril, 2018 - 3:21 PM

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

Respuesta
sapoclay 26 abril, 2018 - 4:00 PM

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.

Respuesta
aldair 14 abril, 2018 - 5:57 AM

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.

Respuesta
sapoclay 14 abril, 2018 - 11:40 PM

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.

Respuesta
Orlando Moreno 23 marzo, 2018 - 4:03 PM

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

Respuesta
sapoclay 23 marzo, 2018 - 4:40 PM

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

Respuesta
Orlando Moreno 23 marzo, 2018 - 2:55 PM

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

Respuesta
sapoclay 23 marzo, 2018 - 3:27 PM

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.

Respuesta
Emilio 18 marzo, 2018 - 1:22 PM

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!

Respuesta
sapoclay 18 marzo, 2018 - 6:39 PM

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.

Respuesta
Emmanuel 14 marzo, 2018 - 3:01 AM

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

Respuesta
sapoclay 14 marzo, 2018 - 12:08 PM

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

Respuesta
sapoclay 18 marzo, 2018 - 9:20 PM

Prueba esto para evitar que busquen tus URLS.

Respuesta
4webmasters 21 febrero, 2018 - 2:45 PM

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

Respuesta
sapoclay 21 febrero, 2018 - 3:48 PM

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

Respuesta

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.