jQueryとオーディオタグを使用していますが、デスクトップブラウザとAndroid 2.3.6ブラウザの間に不一致があります。デスクトップChrome/FirefoxとAndroid 2.3.6ブラウザ間のJQueryイベント処理の相違点
以下のボードは、play()およびpause()メソッド呼び出しに関連する「再生」および「一時停止」ボタンの「クリック」イベントを伴う2つのjQueryモバイルボタンを介してカスタマイズされたオーディオコントロールを実装しています。オーディオ要素。
私はAndroidのブラウザでそれを読み込む場合は、以下のコードはありません、クロムまたはFirefox上で動作しますが、一方で、以下のコードでは、デスクトップのChromeとFirefoxのと同様にアンドロイド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>
の両方のために働きます「再生」ボタンをクリックすると音声が再生されます
<!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>
なぜこのようなケースが考えられますか?イベントがモバイルブラウザで処理される方法に違いはありますか?
は、この単純化は、Androidのブラウザ(v2.3.6およびV3.2.1)にも、デスクトップ上では動作しませんので、行動は間違いなく異なっています。 –
デスクトップやAndroidで動作しない場合(動作しない場合)は同じですか? – Lloyd
私は自分のコードの動作が提案したコードの動作と異なることを意味しました。私のコードは少なくともデスクトップで動作しますが、私のテストではあなたの提案はどちらでも動作しません。 –