Tengo un reproductor en html5:
<script src="https://jwpsrv.com/library/FfMxTl3oEeSEiiIACxmInQ.js">
</script>
<div id="aRzklaXf">Loading the player...</div>
<script type="text/javascript">
var playerInstance = jwplayer("aRzklaXf");
playerInstance.setup({
"file": demo,
"height":"360",
"width":"480",
stretching: "bestfit",
"image": "#",
"mediaid": "player",
"mute": false,
"autostart": false,
"cast": {
"appid": "player",
},
});
</script>
Como podéis ver en "file" donde normalmente va la URL del archivo, tengo "demo", porque "demo" es una variable que está guardada en un archivo javascript:
<script>var demo = "https://mydomain.com/myvideo.m3u8";</script>
De esta manera tengo una especie de base de datos para los archivos que deseo que sean reproducidos.
Hasta este punto todo está perfecto, pero quiero saber de qué manera puedo cambiar el archivo que se reproduce utilizando la misma página html y, por ende, el mismo reproductor.
Lo que quiero decir es: Quiero crear un grupo de botones que cada uno contenga un archivo a reproducir, por ejemplo:
- BTN1 = myvideo1.m3u8
- BTN2 = myvideo2.m3u8
- BTN3 = myvideo3.m3u8
Pero que al dar clic a cualquiera de esos botones cambie la fuente de mi reproductor y "reescriba" el contenido que hay dentro de la variable "demo".