entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

problema con plugin jplayer jquery

hola esto desarrollando una aplicación web (de una radio) para antes del 21 pero el jplayer me esta retrasando un montón no consigo que funcione al darle al botón del play no hace nada ni siquiera da error ni ningún tipo de log
aquí os dejo el log:
PD: no tiene bootstrap original usa un mod de bootstrap: https://github.com/FezVrasta/bootstrap-material-design

    <!DOCTYPE html>
<html>
<head>
    <title></title>
<style>
.centro {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}

</style>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ripples.min.js"></script>
<script src="js/material.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script><script> 
$(document).ready(function() {
var stream = {
        title: "ElectroFM",
        mp3: "http://listen.radionomy.com/abc-jazz"
    },
    ready = false;
  $("#jpId").jPlayer( {
        ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream);
        },
        play: function(event) {
            $(this).jPlayer("setMedia", stream);
        },
        pause: function() {
            $(this).jPlayer("clearMedia");
        },
        error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
                // Setup the media stream again and play it.
                $(this).jPlayer("setMedia", stream).jPlayer("play");
            }
    },
      cssSelectorAncestor: "jp_container",
      cssSelector: {
          title: "#title",
          play: "#play",
          pause: "#pause",
          stop: "#stop",
          mute: "#mute",
          unmute: "#unmute",
          currentTime: "#currentTime",
         duration: "#duration"
        },
        swfPath: "js",
        supplied: "mp3",
        wmode: "window",
        errorAlerts: true,
        consoleAlerts: true,
        warningAlerts: true

  });
});
</script>
</head>
<body>
<div id="#jpId" class="jp-jplayer"></div>
<div id="jp_container" class="centro">
    <div class="row">

            <a id="play" href="#"><i class="btn btn-info btn-fab btn-raised mdi-av-play-arrow"></i></button>
            <a id="pause" class="jp-pause" href="#"><i class="btn btn-info btn-fab btn-raised mdi-av-pause "></i></a>
</div>
</div>
</body>
</html>

1 Respuesta

3votos

white Puntos75880

tienes algunos errores a simple vista,

tu elemento div tiene un identificador no valido:

<div id="#jpId" class="jp-jplayer"></div>

tienes mal cerrada una etiqueta:

<a id="play" href="#">
<i class="btn btn-info btn-fab btn-raised mdi-av-play-arrow"></i>
</button> <----

el metodo cssSelectorAncestor debe tener una query valida:

cssSelectorAncestor: "jp_container", debería ser '#jp_container'

intentalo asi:

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <meta name="charset" content="UTF-8">
   <style>
   .centro {
       position: absolute;
       top: 50%;
       left: 50%;
       z-index: 3;
         -webkit-transform: translate3d(-50%,-50%,0);
            -moz-transform: translate3d(-50%,-50%,0);
             -ms-transform: translate3d(-50%,-50%,0);
              -o-transform: translate3d(-50%,-50%,0);
                 transform: translate3d(-50%,-50%,0);
   }

   </style>
   <link href="css/bootstrap.min.css" rel="stylesheet">
   <link href="css/ripples.min.css" rel="stylesheet">
   <link href="css/material-wfont.min.css" rel="stylesheet">
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script src="js/bootstrap.min.js"></script>
   <script src="js/ripples.min.js"></script>
   <script src="js/material.min.js"></script>
   <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
   <script type="text/javascript"> 
   $(document).ready(function() {
      var stream = {
         title: "ElectroFM",
         mp3: "http://listen.radionomy.com/abc-jazz"
      },
      ready = false;

      $("#jpId").jPlayer({
         ready: function (event) {
            ready = true;
            $(this).jPlayer("setMedia", stream);
         },
         pause: function() {
            $(this).jPlayer("clearMedia");
         },
         error: function(event) {
            if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
               // Setup the media stream again and play it.
               $(this).jPlayer("setMedia", stream).jPlayer("play");
            }
        },
        cssSelectorAncestor: "#jp_container",
        cssSelector: {
            title: "#title",
            play: "#play",
            pause: "#pause",
        },
        swfPath: "js",
        supplied: "mp3",
        preload: "none",
        wmode: "window",
        useStateClassSkin: true,
        autoBlur: false,
        keyEnabled: true
      });
   });
   </script>
</head>
<body>
<div id="jpId"></div>
<div id="jp_container" class="centro">
    <strong style="display:block" id="title"></strong>
    <a href="#" id="play" class="jp-play"><i class="btn btn-info btn-fab btn-raised mdi-av-play-arrow"></i></a>
    <a href="#" id="pause" class="jp-pause"><i class="btn btn-info btn-fab btn-raised mdi-av-pause "></i></a>
</div>
</body>
</html>

0voto

endes gogo comentado

muchas gracias ya funciona, no se como no me avía fijado en esos errores.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta