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

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.
31 Comentarios
como hago para que se reprodusca solo
Hola. Me parece recordar que bastaba con añadir autoplay (tal cual, sin opciones) en la etiqueta video. Salu2
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
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.
perdon ya no funciona verdad ??’ xq intente hacer lo q dices y noo me reproduce :(
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
¡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.
Hola. Puedes probar
., Pero échale un vistazo a la ayuda oficial. Espero que te sirva. Salu2 y gracias por el comentario.
hola me serviria para blogger?
Creo que no, pero no te lo puedo asegurar. Pruébalo y si te funciona, házmelo saber. Salu2.
Hola no entendí muy bien donde es que va el url de la lista? Soy novato en esto del html
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.
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,
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.
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 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, 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.
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
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, 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.
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.
GENIAL me sirvio al 100% Ahora me falta ocultar la URL que no se como tendrás alguna idea
Me alegro que te fuese útil. Exactamente ¿en qué punto quieres ocultar la URL?
Prueba esto para evitar que busquen tus URLS.
aalgun tipo de codigo oculto tienes, para engañar, porque no funciona
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