javascript - How to fix jPlayer not playing until second press on Android Chrome - also volume controls disappear? -

i've been having issues extensive reskin of jplayer music player , playlist player. main 2 issues have happen on android chrome browser.

1: playlist doesn't play until play has been clicked twice. might fixed on second pen android fixes talked here: http://jplayer.org/latest/demo-01-android

2: volume image disappears except audio icon

i have 2 pens i've been using work on issue: http://codepen.io/adbakke/pen/zgyygm & http://codepen.io/adbakke/pen/bdgoew

the html markup slimmed down version of playlist example page jplayer:

<div class="jplaylistplayer">   <div id="jquery_jplayer_1" class="jp-jplayer"></div>   <div id="jp_container_1" class="jp-audio1" role="application" aria-label="media player">     <div class="jp-type-playlist">       <div class="jp-gui jp-interface1">         <div class="jp-details1">           <div class="jp-title" aria-label="title">&nbsp;</div>         </div>         <div class="jp-controls1">           <button class="jp-play" role="button" tabindex="0">play</button>         </div>         <div class="jp-progress1">           <div class="jp-seek-bar">             <div class="jp-play-bar"></div>           </div>         </div>         <div class="jp-volume-controls1">           <button class="jp-mute" role="button" tabindex="0">mute</button>           <div class="jp-volume-bar">             <div class="jp-volume-bar-value"></div>           </div>         </div>         <div class="jp-time-holder">           <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>           <div class="jp-timer-sep">&#47;</div>           <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>         </div>       </div>       <div class="jp-playlist scroll-pane">         <ul>           <li>&nbsp;</li>         </ul>        </div>     </div>   </div> </div> 

pretty basic - i'm doing , has specific ideas on how should , work. not yet javascript pro keep in mind here's initialize:

new jplayerplaylist({   jplayer: "#jquery_jplayer_1",   cssselectorancestor: "#jp_container_1"   },     [{       title: "nas - ain't hard tell (gee whiz remix)",       mp3: "http://www.geewhiz.net/audio/tracks/nas - ain't hard tell (gee whiz remix).mp3"     }],   {     swfpath: "../../dist/jplayer",     looponprevious: true,     supplied: "mp3",     loop: false,     wmode: "window",     usestateclassskin: true,     autoblur: false,     smoothplaybar: false,     keyenabled: true,     preload: "auto"   });      // initialize custom scrollbar: generates page , page down buttons $(".scroll-pane").mcustomscrollbar({   axis: "y",   alwaysshowscrollbar: 2,   theme: "rounded",   scrollbuttons: {     enable: true   },   snapamount: 120,   scrollbarposition: "outside",   callbacks: {     oninit: function() {     }   } }); 

i tested on nexus 7 (2013) android 5.1 using chrome 42.0.2311.109 , samsung galaxy tab pro 8.4 android 4.4 (cyanogenmod 11) chrome 41.0.2272.96; on galaxy s4 (i545) android 4.3 , chrome 42.0.2311.109 seems work fine on both pens assuming wait 5 seconds before clicking play.

i thought maybe speed loading of mp3 , i'm not sure if server gzipping added htaccess make sure it's not being gzipped:

rewriterule ^(.*)$ $1 [ns,e=no-gzip:1,e=dont-vary:1] 

is timing issue? why volume bar appear when loads somehow disappears? have works expected on desktop browsers.

luckily posted on github thread , recommended binding touch events click events. apparently version (current of 6/15/2015 [today]) not handle touch events , putting these solves android issues.

here's code clued me in:

$('.play-control').on('click touchstart', function(){     $('#player').jplayer('play'); });