Различия в обработке событий JQuery между настольным Chrome / Firefox и браузером Android 2.3.6 - PullRequest
Новая
       19

Различия в обработке событий JQuery между настольным Chrome / Firefox и браузером Android 2.3.6

0 голосов
/ 12 марта 2012

Я играю с jQuery и звуковым тегом, но я столкнулся с некоторыми несоответствиями между настольными браузерами и браузером Android 2.3.6.

В приведенной ниже инструкции реализованы настраиваемые элементы управления звуком с помощью двух мобильных кнопок jQuery с событиями «click» на кнопках «play» и «pause», связанных с вызовами методов «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>

Есть идеи, почему это так?Есть ли разница в способе обработки событий в мобильном браузере?

1 Ответ

1 голос
/ 12 марта 2012

Поскольку вы используете кандидата на выпуск 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...