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

Valora este artículo:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…


top feature image

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

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

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.

 


25 Comentarios

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?

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.

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.

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.

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.

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.

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?

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.

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.

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.

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 .

Deja un comentario

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