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.
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.
6 Comentarios
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)»
Hola. El ejemplo funciona. Acabo de probarlo con la URL https://rtvelivestream.akamaized.net/la1_dvr.m3u8 por lo que me parece que los links que has probado no están online. Prueba con otras URL .m3u8 y verás que si que funciona.
Salu2 y gracias por comentar.
saludos , quiero montar una web de peliculas , este eproducotr podra reproducir archivos torrent sin nesecidad de descrgar la
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.
Me fue util. Grachias por compartirlo
Gracias a ti por comentar. Salu2.