Hacer Pregunta

Conecta

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

preguntó
Software
426 Vistas
1 Respuestas
solucionada

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>
por endes gogo (800 puntos) en Software

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>
por white (75.880 puntos)
seleccionada por

0voto

endes gogo comentado

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

por endes gogo (800 puntos)

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta