如何修复 jPlayer 直到第二次按下 Android Chrome 才播放 - 音量控制也会消失？

Question

我在对 jPlayer 音乐播放器和播放列表播放器进行广泛的重新设计时遇到了一些问题。我在 Android Chrome 浏览器上遇到的主要两个问题。

1: 播放列表并不总是播放，直到点击播放两次。这可能会在我的第二支笔上修复，这里提到 Android 修复：http://jplayer.org/latest/demo-01-android

2: 音量图像完全消失，除了音频图标

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 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 的加载速度，但我不确定服务器是否正在压缩，所以我将它添加到 htaccess 以确保它没有被压缩：

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

是时间问题吗？为什么音量条出现然后当它全部加载时它以某种方式消失了？我不得不说这在桌面浏览器上完全符合预期。

Answer 1

幸运的是，有人在我的 Github 帖子中发布了关于此的帖子，并建议我研究将触摸事件绑定到点击事件。显然这个版本（截至 2015 年 6 月 15 日 [今天] 的当前版本）不能很好地处理触摸事件，通过将它们放在一起，它解决了我所有的 Android 问题。

这里是提示我的代码：

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

如何修复 jPlayer 直到第二次按下 Android Chrome 才播放 - 音量控制也会消失？

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

javascript

google-chrome

jplayer

html5-audio