Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i make circle jPlayer autoplay?

Tags:

jquery

jplayer

Can anyone tell me how to make this autoplay?

$(document).ready(function(){
    var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
    {
        m4a:"x.mp3",
        oga: "x.ogg"
    }, {
        cssSelectorAncestor: "#cp_container_1"
    });
});
like image 815
Kochumon Mathew Avatar asked Oct 18 '11 14:10

Kochumon Mathew


3 Answers

Try this (documentation here) after you have created your player:

$('#jquery_jplayer_1').jPlayer("play");

Alternatively instantiate the player like this:

  $(document).ready(function () {
      $("#jquery_jplayer_1").jPlayer({
         ready: function () {
             $(this).jPlayer("setMedia", {
                m4a:"x.mp3",
                oga: "x.ogg"
              }).jPlayer("play");
          },
          swfPath: "/scripts/Jplayer.swf",
          supplied: "m4a, oga"
      });
  });
like image 119
Andy Rose Avatar answered Oct 03 '22 21:10

Andy Rose


maybe not the nicest solution but it works:

[...]
canplay: function() {
    $("#jquery_jplayer_1").jPlayer("play");
}

$(document).ready(function() {                           
    var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
    {
        m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
        oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
    }, {
        cssSelectorAncestor: "#cp_container_1",
        canplay: function() {
            $("#jquery_jplayer_1").jPlayer("play");
        }
    });
});
like image 23
hansmaiser Avatar answered Oct 03 '22 19:10

hansmaiser


Hope my blog can help you solve your issue http://gmarkmananquil.blogspot.com/2012/01/jplayers-circleplayer-ie-issue.html and download the script. None of the above work for me so just try my work around a bit.

Here is the work-around I do in achieving auto play in this plugin, first add autoplay attributes to the defaults object variable in circleplayer script found in line 35.

defaults = {
            // solution: "flash, html", // For testing Flash with CSS3
            supplied: "mp3",
            solution: "flash,html",
            // Android 2.3 corrupts media element if preload:"none" is used.
            // preload: "none", // No point preloading metadata since no times are displayed. It helps keep the buffer state correct too.
            cssSelectorAncestor: "#cp_container_1",
            cssSelector: {
                play: ".cp-play",
                pause: ".cp-pause"
            },
            autoplay: false // add this autoplay default to false
        },

Second, modify the script in line 98 with this code,

if(self.options.autoplay){
     $(this).jPlayer("setMedia", self.media).jPlayer('play');
   }
else{
    $(this).jPlayer("setMedia", self.media);
   }

The example usage of the script would be like this,

var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",{
        mp3: "music/booty me down.mp3"
    }, {
        cssSelectorAncestor: "#cp_container_1",
        swfPath: "js",
        wmode: "window", size : { width:"40px" },
                autoplay: true
    }
    );
like image 31
1inMillion Avatar answered Oct 03 '22 21:10

1inMillion