Как исправить jPlayer, не играя до второго нажатия на Android Chrome - также исчезнут регуляторы громкости?

Question

У меня возникли проблемы с обширным переплетом музыкального плеера jPlayer и плейлиста. Основные две проблемы, которые я испытываю в браузере Android Chrome.

1: Плейлист не всегда воспроизводит, пока воспроизведение не будет нажато дважды. Это может быть установлено на мою второй ручке с андроидом затруднительными говорило здесь: http://jplayer.org/latest/demo-01-android

2: Объем изображение полностью исчезает аудио значок

кроме меня есть две ручки, я использую, чтобы работать над этим вопрос: http://codepen.io/adbakke/pen/zGYyGM & http://codepen.io/adbakke/pen/bdGOEW

HTML-Разметка похудела версию списка воспроизведения, например, страницы из 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> 

Довольно простой - я делаю это для кого-то, и у него есть очень конкретные идеи о том, как он должен выглядеть и работать. Еще не про JavaScript, так что имейте это в виду, вот инициализации:

new jPlayerPlaylist({ 
    jPlayer: "#jquery_jplayer_1", 
    cssSelectorAncestor: "#jp_container_1" 
    }, 
    [{ 
     title: "NAS - It Ain't Hard To Tell (Gee Whiz Remix)", 
     mp3: "http://www.geewhiz.net/audio/tracks/NAS - It Ain't Hard To 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 the custom scrollbar: generates the page up and page down buttons 
$(".scroll-pane").mCustomScrollbar({ 
    axis: "y", 
    alwaysShowScrollbar: 2, 
    theme: "rounded", 
    scrollButtons: { 
    enable: true 
    }, 
    snapAmount: 120, 
    scrollbarPosition: "outside", 
    callbacks: { 
    onInit: function() { 
    } 
    } 
}); 

Я испытал это на моем Nexus 7 (2013) Android 5.1 с помощью Chrome 42.0.2311.109 и Galaxy Tab Samsung Pro 8.4 Android 4.4 (CyanogenMod 11) с Chrome 41.0.2272.96; на моем Galaxy S4 (I545) Android 4.3 и Chrome 42.0.2311.109 кажется, что он отлично работает на обоих ручках, предполагая, что я жду 5 секунд, прежде чем нажимать кнопку.

Я думал, что, может быть, я мог бы ускорить загрузку mp3, и я не уверен, что если сервер gzipping поэтому я добавил это Htaccess, чтобы убедиться, что он не архивированная:

RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1] 

Является ли это вопрос о сроках? Почему панель тонов появляется тогда, когда все ее загружает, как-то исчезает? Я должен сказать, что это работает полностью, как ожидалось, в настольных браузерах.

Answer 1

К счастью, кто-то опубликовал мою нить Github об этом и рекомендовал, чтобы я искал привязные события касания, чтобы щелкнуть события. По-видимому, эта версия (текущая по состоянию на 06/15/2015 [сегодня]) не очень хорошо обрабатывает сенсорные события, и, объединяя их, она решает все мои проблемы с Android.

Вот код, который раскрыл мне:

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