0

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".

1 respuesta 1

2

Con un arreglo lo puedes solucionar: Ya revise tu código el liga que me enviaste y lo corregí. Para probarlo solo debes dar click en botón 1 y listo;

<a id="0" onClick="mifuncion(this.id)">boton1</a>
     <a id="1" onClick="mifuncion(this.id)">boton2</a>
     <a id="2" onClick="mifuncion(this.id)">boton3</a>
     <p id="demo">Prueba<p>
     <br><br>
      
      
       <div id="aRzklaXf">Loading the player...</div>
     <script src="https://jwpsrv.com/library/FfMxTl3oEeSEiiIACxmInQ.js"></script> 
     <script type="text/javascript">
     var demo;
     var miarreglo = [
         "https://weather-lh.akamaihd.net/i/twc_1@92006/master.m3u8", "www.nike.com", "www.otra.com"];
     function mifuncion(unclick){
     var i = unclick;
     var demo = miarreglo[i];
     document.getElementById("demo").innerHTML = demo;
       
       var playerInstance = jwplayer("aRzklaXf");
       playerInstance.setup({
        "file": demo,
        "height":"360",
        "width":"480",
        stretching: "bestfit",
        "image": "#",
        "mediaid": "player",
        "mute": false,
        "autostart": false,
            "cast": {
                "appid": "player",
                "logo": "https://i.ibb.co/Tgk2YrC/Logow-1-1.png",
            },
       });
  }
    </script>

Y ya ocupas tu variable demo como tu quieras.

8
  • Gracias por responder. Entiendo que en "demo" se guardará el link de cada archivo, sin embargo, al llevarlo a cabo no funciona, de hecho antes lo intenté así también. Te comparto el ejemplo práctico de JSFiddle. [jsfiddle.net/yLrm2ca7/] Quiero que notes que guardé una variable con el nombre de "prueba1" y funciona perfectamente, pero al utilizar "demo" con tu ejemplo, el reproductor no va. el 16 oct. 2020 a las 4:43
  • @slowdmelendez360 ¿como no funciona? aquí mismo lo puedes probar (en mi respuesta), dando click en ejecutar y después click en cualquiera de los tres botones. Ahí veras que demo cambia su valor (o la url). ¿como estas llevando la variable demo a tu función? ¿puedes escribir el código para ver en que te esta fallando? y así ayudarte a pasar la variable y los valores.
    – Abner
    el 16 oct. 2020 a las 5:36
  • Quiero decir, ¡funciona!, pero no en el reproductor. Te dejé el código en JSFiddle [jsfiddle.net/yLrm2ca7/]. Tu script funciona bien, cambia su valor y va perfecto, pero al momento de intentar implementarlo con el reproductor no va. el 16 oct. 2020 a las 5:38
  • Me dice que la pagina no existe Error 404
    – Abner
    el 16 oct. 2020 a las 5:40
  • ¿Puedes ponerlo editando tu pregunta? para ahí revisar...
    – Abner
    el 16 oct. 2020 a las 5:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.