Inicio » Novedades » Cómo reproducir archivos m3u8 en tu página web

Cómo reproducir archivos m3u8 en tu página web

Publicado el: Última actualización: 43 Comentarios
0

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


El post que voy a dejar hoy viene por que hace unos días un usuario de la web me ha preguntado como podría reproducir archivos m3u8 en su página web. La verdad es que hasta que me lo planteó no había pensado en ello, ya que Kodi da muy buenos resultados. Pero pensándolo un poco, la verdad es que está bien la idea.

En su día dejé ya colgado un artículo en esta web sobre las URL m3u, m3u8 y .ts. El que quiera consultar aquel artículo puede hacerlo desde el siguiente artículo. Supongo que habrá gente que o no quiere o no puede reproducir este tipo de URL desde el media center que Kodi nos pone a disposición. Por lo que lo que en su día me preguntó el usuario por el que he buscado esta forma de reproducir formatos m3u8 en una web, cobra todavía más sentido.

Como todo el que ya haya leído el artículo sobre este tipo de URL ya sabrá, estas no son más que archivos de texto, que necesitarán de un interprete para recibir la emisión que por ella  llegará al usuario. Para esto utilizar JWPlayer es a mi modo de ver una opción más que factible y funcional. Para que la reproducción funcione habrá que hacerse con una Key que tendremos que añadir al código que voy a mostrar a continuación.  Se puede consultar la información de la web de JWPlayer acerca de esta Key en el siguiente enlace.

Reproducir archivos m3u8 en tu página web

<head>
<meta charset="UTF-8">
<title>Reproducción archivos m3u8</title>
<script src="http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js"></script>
<style type="text/css"> 
body{bgcolor:#f0f0f0;}
#reproductor_aspect{display: none;}
#reproductor_jwpsrv{position: absolute; top: 0px; z-index: 10;}
#reproductor_wrapper{position: relative; display: block; width: 700px; height: 400px;}
</style>
<script>// <![CDATA[
//La Key que debes conseguir en la web de JWPlayer en Hexadecimal
jwplayer.key="6RfMdMqZkkH88h026pcTaaEtxNCWrhiF6ACoxKXjjiI=";
// ]]></script>
</head>
<body>
<div id="reproductor_wrapper">
  <object type="application/x-shockwave-flash" data="http://p.jwpcdn.com/6/8/jwplayer.flash.swf" width="100%" height="100%" bgcolor="#000000" id="reproductor" name="reproductor" tabindex="0">
    <param name="allowfullscreen" value="true">
    <param name="allowscriptaccess" value="always">
    <param name="seamlesstabbing" value="true">
    <param name="wmode" value="opaque">
  </object>
  <div id="reproductor_aspect"></div>
  <div id="reproductor_jwpsrv"></div>
</div>
<script>// <![CDATA[
jwplayer('reproductor').setup({
    //URL m3u8 que queremos reproducir
    file: "https://rtvelivestream.akamaized.net/la1_dvr.m3u8",
    width: "700",
    skin: "five",
    height: "400",
    title: 'xsoundtv.com',
    image: "",
    logo: {
    file: "",
    position: 'top-right',
    margin: '0',
    link: ""
    },
    stretching: "fill",
    autostart: "true",
                abouttext: '',
            aboutlink: '',
  });
// ]]></script>
<span>Se está reproduciéndo la URL:</span>
<p>
<textarea placeholder="https://rtvelivestream.akamaized.net/la1_dvr.m3u8" cols="95" rows="3" readonly></textarea>
</p>
 
</body>

Como se puede ver el código no tiene mucha ciencia. Solo hay que tener en cuenta que partes deben ir dentro del body y cuales pueden salir de el. Si alguien quiere ver el código funcionando puede utilizar este enlace.

También te puede interesar ...

Deja un comentario

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

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

43 Comentarios

Deivid Chipana 27 septiembre, 2020 - 2:19 AM

Hola muy buenas he tenido un problema me dice “There was a problem provinding access to protectd content. (Error code: 232403)” cuando mi cel y mi pc estan conectados a mi router da perfectamente pero cuando en mi cel lo pongo con datos o me conecto a otra red me aparece este error a que crees que se deba??

Respuesta
entreunosyceros 27 septiembre, 2020 - 11:19 AM

Hola. Por lo que me cuentas parece que a lo que te quieres conectar está limitado a la IP de tu router. Por eso cuando quieres conectarte por datos o mediante otra red te dice que hay un problema al acceder al contenido protegido, ya que utilizas otra IP que el dispositivo que da el servicio no reconoce esa IP que utilizas.
Espero haberte aclarado algo. Salu2.

Respuesta
Dina 19 junio, 2020 - 2:00 AM

Gracias por responder, copiando solo el body no me funcionó, había que cambiar el nombre del reproductor , re nombrándolo por otro, ejemplo: primer stream: jwplayer(‘reproductor’), segundo stream: jwplayer(‘reproductor2’) y así sucesivamente, y respectivamente reemplacé también el nombre del reproductor en el id=”reproductor” name=”reproductor”, de está forma me funcionó perfecto.

Gracias por tu aporte sapoclay.

Respuesta
entre unos y ceros 20 junio, 2020 - 4:03 PM

Me alegro que lo solucionases. Gracias a ti por comentar. Salu2.

Respuesta
Dina 18 junio, 2020 - 10:55 PM

Saludos sapoclay, Y si quiero colocar 2 reproductores dentro del mismo php, con tu php solo se puede ver un solo reproductor, como seria para colocar 2 o tres en la misma ventana?

Gracias de antemano.

Respuesta
entre unos y ceros 19 junio, 2020 - 12:19 AM

Hola. Hace ya unos cuantos años de este artículo, pero me parece que para poder colocar diferentes reproductores era suficiente con duplicar el contenido del body y cambiar la URL a reproducir.

Pero vamos, como te digo hace tres años y pico que escribí este artículo, por lo que si lo pruebas y no funciona como te digo, deja un comentario o mandame un correo y lo miro más con calma para darte una mejor respuesta.

Salu2 y gracias por comentar.

Respuesta
luis 7 junio, 2020 - 3:14 AM

Hola primero que todo felicidades tu codigo corre perfecto, pero me gustaria saber si no cuentas con un codigo para poder leer las listas m3u completas.

Respuesta
entre unos y ceros 7 junio, 2020 - 12:31 PM

Hola. En primer lugar gracias por la visita. Ahora te digo que no entiendo lo que me pides. ¿A qué te refieres con un código para poder leer las listas completas? ¿Qué es lo que quieres hacer?…
Salu2.

Respuesta
[email protected] 9 febrero, 2020 - 11:16 PM

si pongo la url directamente en el codigo funciona perfectamente. el tema esta en lo siguiente:

Objeto 1: web que obtiene la url m3u desde una base de datos a una variable “&link_m3u”.
Objeto 2 : web con el codigo del reproductor.

En el objeto 1 hago un llamado al Objeto 2 enviándole la variable “&link_m3u”, el Objeto 2 la recibe tal cual la envia el Objeto 1.

– En el codigo del reproductor en “file”, no me funciona si pongo la variable tal cual (“&link_m3u”).

Respuesta
sapoclay 10 febrero, 2020 - 12:56 AM

Lo único que se me ocurre es lo que te he dicho en el anterior comentario. Prueba a limpiar la URL que envía el objeto 1 al objeto2 e insértala en el reproductor utilizando una variable mediante php.
Espero que consigas solucionarlo, y si lo consigues te agradecería que me comentases cómo lo hiciste. Salu2.

Respuesta
[email protected] 9 febrero, 2020 - 9:35 PM

no puedo pasarla por formulario ya que al momento de reproducirla no la conozco, ella esta almacenada en un atributo en la base de datos del sistema, lo que hago es cargarla en una variable del mimo tipo de dominio y enviarla al form web que tiene el codigo del reproductor. el problema es que esta variable su sintaxis es “&link_m3u” y tendria que convertirla al codigo js para introducirla al codigo del reproductor. y es justamente lo que no encuentro como hacer!!!!

Respuesta
sapoclay 9 febrero, 2020 - 10:51 PM

No sé muy bien a qué te refieres con lo de convertirla al código js. ¿Has probado a limpiar la URL con expresiones regulares para conseguir la sintaxis correcta de una url (http://loquesea.m3u) para el reproductor? Una vez que consigas la sintaxis correcta, solo tienes que pasarla al reproductor como indico en el post (o de alguna otra forma).
Salu2.

Respuesta
[email protected] 9 febrero, 2020 - 4:20 AM

como hago para recibir la direccion del m3u por parametro? osea, de in objeto principal, llamar al reproductor enviandole una variable con el link m3u y que este lo reprodusca?

Respuesta
sapoclay 9 febrero, 2020 - 1:06 PM

Hola. Prueba a utilizar un formulario para pasar la URL m3u. Comprueba que la URL que se le pasa es .m3u (o la extensión/es que te interese) y si pasa la validación, la pasas al reproductor para reproducir.
Ahora me pillas justo de tiempo, pero un día de estos que tenga tiempo haré un artículo sobre cómo hacer esto mismo.
Salu2 y gracias por el comentario.

Respuesta
Jose 24 enero, 2019 - 3:46 PM

Hola, en primer lugar felicitarte por el código va genial. Tengo una pregunta lo de la key, puedo utilizar la que hay o debo de conseguir yo una? de ser asi como la consigo es que creo que el enlace para conseguir la key esta caido, echalé un vistazo porfa.

Respuesta
sapoclay 24 enero, 2019 - 5:14 PM

Hola. La verdad es que no sé si la key que aparece en el ejemplo sigue funcionando. Prueba a registrarte como desarrollador de JWPlayer y a solicitar una Key.

Cuando tenga tiempo actualizaré el post o haré otro más actual. Si te da problemas este método, puedes probar con VídeoJS.

Salu2 y gracias por el aviso del enlace caído.

Respuesta
Ramón 13 diciembre, 2018 - 9:15 PM

El video de muestra no funciona

Respuesta
sapoclay 16 diciembre, 2018 - 11:30 PM

Lo sé, actualmente los enlaces a los ejemplos no funcionan. Estoy purgando y reemplazando todos los ejemplos de la web. Próximamente volverán a estar disponibles. Salu2 y gracias por comentar.

Respuesta
cicero ferreira 10 noviembre, 2018 - 2:55 PM

ola sapoclay , gostaria de saber como resolver o erro nos smartphone , nao consegui rodar nos celulares e nem em tvs smart voce sabe como fazer isso aguardo resposta .

Respuesta
sapoclay 10 noviembre, 2018 - 3:35 PM

Hola. ¿qué error te aparece en los teléfonos móviles?. Sin más datos no sé como ayudarte. Salu2.

Respuesta
John 16 agosto, 2018 - 7:28 AM

Hola que tal, te hago una pequeña consulta como pondria un logo que este permanente en una esquina del reproductor. Gracias y buen codigo. :)

Respuesta
sapoclay 17 agosto, 2018 - 3:21 PM

Hola, ese logo al que te refieres, se llama mosca. Generalmente esta imagen se pone en el emisor, pero quizás puedas colocarlo mediante CSS. Si necesitas más ayuda, házmelo saber. Salu2.

Respuesta
Carlos 30 julio, 2018 - 1:56 AM

hola, y como se puede hacer para que reprodusca el video de manera automatica, sin que el usuario tenga que darle al play

Respuesta
sapoclay 30 julio, 2018 - 2:03 AM

Hola. Debería de empezar ya de manera automática. Esto se consigue con autostart: true, que debería estar dentro del código que se mira en el post. Si no se te reproduce automáticamente, es posible que tu navegador tenga alguna incompatibilidad con jwplayer.
Salu2.

Respuesta
lenny 22 julio, 2018 - 3:24 AM

en byethost

Respuesta
lenny 21 julio, 2018 - 5:40 AM

tengo una pregunta use el codigo que muestras todo bien pero cuando la subo ami pagina privada alojada aun hosting gratuito reproduce por unos segundos y luego sale el error

” This video file cannot be played.
(Error Code: 230000)”

pero cuando lo pruebo por blogspot corre normal no me sale el error en el blog porque pasara esto?

Respuesta
sapoclay 21 julio, 2018 - 2:41 PM

Hola. Ese error puede ser debido a las limitaciones que suelen tener los hostings gratuitos. Suelen evitar este tipo de reproducciones por el ancho de banda que consumen, y siendo gratuitos, buscan un equilibrio para que el hosting siga funcionando para todo el mundo. Blogspot, es un sistema más solido que los típicos hostings gratuitos. Supongo que por esto te funcionará en blogspot. Por curiosidad, ¿en qué hosting alojas esa página?.

Salu2.

Respuesta
Jc 9 julio, 2018 - 2:06 AM

hola amigo buenas noches he usado el VIDEOJS y JWPLAYER
funciona VIDEOJS en web y celulares pero JWPLAYER solo funciona por la web no por celular estoy usando el codigo que ponenn en la web solo puse el url del m3u8

http://tv.latintvweb.com:8000/live/anavivaz2018/anavivaz2018/28908.m3u8 <— este link solo lo reproduce jwplaer el videojs no lo detecta tiene sus ventajas y desventajas los 2

necesito ayuda con el jwplayer

Respuesta
sapoclay 9 julio, 2018 - 10:04 AM

Hola.Efectivamente ambos métodos tienen sus ventajas, pero ambos son detectados por Android sin problema. Es más, JWPlayer, puedes verlo funcionando con la URL que proporcionas tú en el siguiente enlace. Por lo que imagino que el problema viene de que o bien utilizas un android muy viejo, aun que en iphone también funciona correctamente, o tu navegador no soporta la reproducción de vídeos o bien estás utilizando algún otro sistema operativo para teléfonos móviles. También es posible que no estés utilizando correctamente los códigos que publiqué en su día en esta web.

Si puedo hacer algo más por ti, no dudes en escribir aquí. Salu2 y gracias por la visita.

Respuesta
kahsadsuperliga 4 enero, 2018 - 9:50 PM

Hola, el servidor de jwplayer bloquea los archivos http.
Hay alguna solución? Desde ya espero tu respuesta!

Respuesta
sapoclay 9 enero, 2018 - 3:28 PM

Hola. Perdona la tardanza. Es posible que te esté bloqueando el protocolo http por que debes conseguir tu propia api Key para un correcto funcionamiento. También deberías asegurarte de que no sea tu navegador quien no esté bloqueando el vídeo. Prueba el enlace de ejemplo que tengo en el artículo (al final) a ver si este te funciona. Espero que te sea de ayuda. De no ser así, dejame otro comentario. Salu2.

Respuesta
David Padilla 28 diciembre, 2017 - 7:52 AM

exelente funcioando en todos los navegadores solo hay que cambiar el .m3u8 gracias hermano

Respuesta
sapoclay 28 diciembre, 2017 - 8:54 AM

Me alegro de que te sea útil. Salu2.

Respuesta
pepmarley (@pepmarley) 14 octubre, 2017 - 10:07 PM

Hola, buen tutorial. Si pongo mi propia “m3u8” so lo me funciona en internet explorer como hago para que se reproduzca con chroome?

Respuesta
sapoclay 21 octubre, 2017 - 11:32 AM

Pues no debería ser así. Yo lo he probado en chrome y firefox con buenos resultados. Te da algún error la consola de chrome al reproducir la lista?

Respuesta
andres 9 octubre, 2017 - 12:13 PM

hola consulta hay algun reproductor web que funcione con el formato .ts ?

Respuesta
sapoclay 21 octubre, 2017 - 11:34 AM

Que yo sepa no. Pero creo que puedes encontrar algún plugin para navegadores que puede reproducir formato .ts. Esto es algo que tengo pendiente de hacer y buscar, pero me falta tiempo. Salu2.

Respuesta
John 20 agosto, 2017 - 10:58 PM

Una pregunta ese codigo donde lo pego :/ , segundo en ese mismo codigo si puedo cambiar solo el archivo m3u8 nada mas. Gracias

Respuesta
sapoclay 20 agosto, 2017 - 11:37 PM

Hola. En primer lugar, el código que puedes encontrar en el artículo puedes utilizarlo donde tú quieras. Si lo copias tal y como está (añadiéndole las etiquetas de apertura y cierre html podrás utilizarlo como página para recibir las emisiones del archivo m3u8 que indiques. Si quieres añadirlo a una página tuya, solo tendrías que adaptar el código que yo te paso a tus necesidades particulares.
En cuanto a tu segunda pregunta te digo que si, que puedes cambiar el archivo m3u8 nada más. Si quieres añadir más reproducciones en la misma página me parece recordar que habría que añadir algunas cosas más, pero la idea principal es la que puedes ver en el post.

Espero haber respondido a tus preguntas. De no ser así, házmelo saber. Salu2 y gracias por el comentario.

Respuesta
angel 29 julio, 2017 - 10:37 PM

de donde saco mi propio http://jwpsrv.com/library/ejuoyqCsEeK4ayIACpYGxA.js y como hago para que este codigo sirva tambien para los smartphone

Respuesta
sapoclay 29 julio, 2017 - 11:37 PM

Hola. En cuanto a tus preguntas te diré que el archivo este del que hablas, yo lo dejaría donde está, pero sino siempre puedes abrirlo, seleccionarlo todo y guardarlo en tu disco duro. Pero después tendrías que cambiar como mínimo la ruta al archivo.

En cuanto a lo de que sirva también para un smartphone te digo que así como está yo puedo verlo en mi smartphone. Si el código te da algún error, publícalo en un comentario.

Salu2.

Respuesta
Hector 12 julio, 2017 - 11:45 PM

El código no funciona en Chrome, he probado en varios ordenadores y solo me funciona en Firefox y Microsoft Edge… hay alguna manera de repararlo?

Respuesta
sapoclay 13 julio, 2017 - 12:30 AM

Me remito a lo dicho en el comentario de la otra entrada ;)

Respuesta
entreunosyceros
Versión 5