JWPlayer, reproduce una URL m3u8 desde tu página web
JWPlayer, reproduce una URL m3u8 desde tu página web

Una vez más aquí. En esta ocasión voy a “actualizar” un artículo que escribí hace como un par de años sobre cómo reproducir archivos m3u8 en tu página web utilizando JWPlayer. Este artículo viene dado por que hoy un usuario me ha preguntado sobre cómo podría enviar la URL a reproducir como parámetro al reproductor, y lógicamente que este la reproduzca. Esto es algo que en su día pensé en publicar, pero un día por otro lo vas dejando … y ya se sabe.

Tengo que decir que en este post solo voy a mostrar el código necesario. Toda la explicación sobre aquel código, su funcionamiento y la Key necesaria para funcionar con JWPlayer, están en el otro  artículo explicadas (creo). Si aún así alguien tiene alguna duda sobre cómo funcionar con JWPlayer, siempre puede consultar la página web de ese proyecto.

Utilizar JWPlayer para reproducir una URL m3u8 a nuestro antojo

Bueno, antes de nada quiero decir que el código que a continuación voy a escribir, se puede (y quizás se debe) escribir en uno o dos archivos. Separando el código html, el javascript y el css, pero por comodidad lo voy a añadir todo a un solo archivo. Este se va a llamar index.php. Cuando lo tengamos guardado, solo tendremos que colocarlo en un servidor, bien sea local o en un alojamiento web así poder comenzar a utilizarlo.

El código

<html>
<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[
//Key para el reproductor. Es posible que sea necesario registrarse en la web de JWPlayer como desarrollador y solicitar una (o eso es lo que había que hacer antes)
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({
    // La URL que envía el formulario la vamos a cargar mediante php y GET
    file: "<?php echo $_GET["urlstreaming"];?>",
    width: "700",
    skin: "five",
    height: "400",
    title: 'Reproducción desde URL',
    image: "",
    logo: {
    file: "",
    position: 'top-right',
    margin: '0',
    link: ""
    },
    stretching: "fill",
    autostart: "true",
    abouttext: '',
    aboutlink: '',
  });
// ]]></script>
<span>Se va a reproducir la URL:</span>
<p>
<!-- Este textarea nos va a mostrar la URL que se va a reproducir. También nos va a mostrar un mensaje si no hay ninguna URL para la reproducción-->
<textarea placeholder="<?php if(empty($_GET["urlstreaming"])){echo 'SIN URL PARA REPRODUCIR';}else{ echo $_GET["urlstreaming"];}?>" cols="95" rows="1" readonly></textarea>
</p>
<!-- Formulario en el que se va a enviar la URL a reproducir-->
<form action="index.php" method="get" name="formu" id="formu" 
      onsubmit="return jwplayer()">
   URL a reproducir: <input type="text" name="urlstreaming" value=""><br>
   <input type="submit" value="   Enviar   ">
</form>
 
</body>

</html>

Si se compara el código de este artículo con el del otro, se puede ver que los cambios han sido más bien pocos. También quiero decir que he buscando (sin pararme demasiado, todo hay que decirlo) en la página de JWPlayer cómo pasar una variable con una sola URL a reproducir en este reproductor, y no encontré nada. Si hay temas sobre arrays de URL’s para reproducir y algunas otras cosas, pero esto no era lo que estaba buscando.

reproductor JWPlayer con caja para la URL

Por este motivo, tiré un poco de imaginación para hacer lo que me interesaba. Aun que estoy seguro de que este posiblemente no sea el método más eficiente, funciona (al menos mientras escribo estas líneas). Eso si, al iniciar el ejemplo se verá que aparece un error en el reproductor. Esto es así por que si no se le indica una URL para reproducir, no tendrá nada que mostrarnos.

Para ver este código funcionando, se puede seguir el siguiente enlace hacia el ejemplo.







¿Qué te ha parecido este post?

¡Haz clic en una estrella para calificarla!

Puntuación media 5 / 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
JWPlayer, reproduce una URL m3u8 desde tu página web
Nombre
JWPlayer, reproduce una URL m3u8 desde tu página web
Descripción
Este artículo es una pequeña actualización de otro. Con estos cambios vamos a poder seleccionar mediante un pequeño formulario que URL m3u8 queremos que se reproduzca, sin tener que meter mano en el código fuente.
Autor
sapoclay
Nombre del editor
entreunosyceros
Logo del editor
Esta entrada tiene 6 comentarios
  1. Angel

    Bro, estoy probando tu ejemplo(enlace que dejaste) ya ingrese varios links de tv en vivo y me salta el siguiente mensaje: “This video file cannot be played.
    (Error Code: 102630)”

  2. Antidoto74

    saludos , quiero montar una web de peliculas , este eproducotr podra reproducir archivos torrent sin nesecidad de descrgar la

    1. sapoclay

      Hola. La verdad es que no lo sé. Yo solo he probado este reproductor con direcciones m3u8. Te recomiendo buscar en la documentación que ofrece JWPlayer para conseguir información fiable. Salu2, siento no poder serte de más ayuda.

  3. Samuel

    Me fue util. Grachias por compartirlo

Deja una respuesta

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