Question

我正在使用jQuery和音频标签，但我在桌面浏览器和Android 2.3.6浏览器之间遇到了一些不一致的问题。

下面的bode只是通过两个jQuery移动按钮实现自定义音频控件，“play”和“pause”按钮上的“click”事件与音频上的“play（）”和“pause（）”方法调用相关联元件。

以下代码适用于桌面Chrome和Firefox以及Android 2.3.6浏览器

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#play-button').click( function() {
          document.getElementById('audio').play();
        });
        $('#pause-button').click( function() {
          document.getElementById('audio').pause();
        });
      });
    </script>
  </head>
  <body>
    <div data-role="page">      
      <div data-role="header">
    <h1>Audio player</h1>
      </div><!-- /header -->  
      <div data-role="content">
    <audio id="audio">
      <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" />
      <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg" />
      <p>Sorry, your browser does not support playing audio.</p>
    </audio>
    <p>
      <div data-role="controlgroup" data-type="horizontal" style="text-align:center">
        <a data-role="button" 
           id="play-button">Play</a>
        <a data-role="button" 
           id="pause-button">Pause</a>
      </div>
    </p>
      </div><!-- /content -->

    </div><!-- /page -->

  </body>
</html>

虽然以下代码适用于Chrome或Firefox，但如果我在Android浏览器上加载，则点击“播放”按钮时不播放音频

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script>
      $(document).ready(function() {
        $('#player').click(function() {
          if (document.getElementById('slider').value == 'play')
            document.getElementById('audio').pause();
          else 
            document.getElementById('audio').play();
        });
      });
    </script>
  </head>
  <body>
    <!--
    Thanks to  
    http://www.html5rocks.com/en/tutorials/audio/quick/
      -->
    <div data-role="page">      
      <div data-role="header">
<h1>Audio player</h1>
      </div><!-- /header -->

      <div data-role="content">
    <audio id="audio">
      <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" />
      <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg" type="audio/ogg" />
      <p>Sorry, your browser does not support playing audio.</p>
    </audio>
    <p>
      <div data-role="fieldcontain" 
           style="text-align:center"
           id="player">
        <select name="slider" 
            id="slider" 
            data-role="slider" >
          <option value="play">Play</option>
          <option value="pause">Pause</option>
        </select> 
      </div>
    </p>
  </div><!-- /content -->

    </div><!-- /page -->

  </body>
</html>

知道为什么会这样吗？移动浏览器中处理事件的方式有何不同？

Answer 1

当您使用JQM候选版本时，您可能发现了一个错误..

单击事件在Android中标准运行..您的问题可能与您处理滑块事件的方式有关...帮助隔离问题并证明事件有效，这个超基本示例是否有效？

<script>
  $(document).ready(function() {
    var player = document.getElementById('audio');

    $('#play').click(function() {
        player.play();
    });

    $('#pause').click(function() {
        player.pause();
    });

  });
</script>

标记更改：

<div data-role="fieldcontain" 
     style="text-align:center"
     id="player">
    <a href="#" id="play">Play</a>
    <a href="#" id="pause">Pause</a>
</div>

桌面Chrome / Firefox和Android 2.3.6浏览器之间的JQuery事件处理差异

1 个答案: