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.
49 Comentarios