2016-10-25 23 views
2

私の会社のオーディオプレーヤーのオーディオサポートテストを実施しています。HTML5オーディオプレーヤーを使用して、サポートされているフォーマットを確認する一連のHTML5オーディオプレーヤーを表示しています。ここのフォーマットは問題ではなく、私がやっていることの説明だけです。iOS HTML5オーディオコントロールが表示されない

Android Chrome、Firefox、Safari、Androidインターネット、Chrome、FirefoxでWindowsのChrome、Firefox、IE11のプレイヤーが表示されますが、iPadとiPhoneの場合、これはTwilightゾーンのエピソードが始まります。

各Audioエレメントに表示されるのは、PLAYボタンとAirPlayコントロール(使用可能な場合)です。私はウェブ全体を見てきました、そして、あなたが要素を十分に広げると、タイムスクラブと音量はちょうど現れなければならないと誰もが言います。私はプレーヤーがページの全幅を伸ばしているが、まだ何も持っていない。ここで

が私のHTMLとCSS

HTMLである:私は完全にコントロールを取得することはできませんなぜ

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>AUDIO TESTS</title> 
</head> 

<body> 

<div class="player"> 
    <h3>AIFF 1</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="Track01.aiff" type="audio/aiff"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>AIFF 2</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="Track29.aiff" type="audio/aiff"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>M4A 1</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="35027823.m4a" type="audio/mp4"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>M4A 2</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="DefyingGravitywinds.m4a" type="audio/mp4"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>MP3</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="35027822.mp3" type="audio/mpeg"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>WAV 1</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="Aboveallhigh.wav" type="audio/wav"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>WAV 2</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="holygourndhigh.wav" type="audio/wav"> 
    </audio> 
</div> 
<div class="player"> 
    <h3>WMA</h3> 
    <audio preload="auto" tabindex="0" controls="controls"> 
     <source src="A8526.wma"> 
    </audio> 
</div> 

</body> 
</html> 

CSS

body { 
    wwidth: 100%; 
    height: 100%; 
    background: #ff0000; 
    font-size: 100%; 
    font-family: Arial, sans-serif; 
    color: #333; 
    margin: 10px 0; 
    text-align: center; 
} 

.player{ 
    width: 75%; 
    height: auto; 
    display: block; 
    margin: 5px auto; 
    border-radius: 3px; 
    background-color: rgba(0,100,0, 1); 
    border: 1px solid #333; 
    padding: 10px; 
} 

.player:hover { 
    background-color: rgba(0,100,0, 0.4); 
} 

.player h3 { 
    padding: 0; 
    margin: 0 0 10px; 
} 

audio { 
    width: 100%; 
    height: 100px; 
    display: block; 
    margin: 0; 
} 

繰り返しますが、私が求めていますiPadとiPhoneに表示されます。これはオーディオ形式のサポートに関する質問ではありません。

ここに私のiPadが表示しているもののスクリーンショットがあります。 enter image description here

+0

解決策が見つかりましたか?私は同じ問題を抱えています。 –

答えて

0

コントロールが表示されているようですが、コンピュータのHTML5で使用されているコントロールと同じではありません。現在の位置スライダーではなく、再生/一時停止ボタンが表示されます。

+0

それは私が言ったことです....第3段落の始まり。それとAirPlayボタン(該当する場合) – Murphy1976

0

私は同様の問題がありましたが、オーディオプレーヤーの幅が十分でない場合にのみ問題が発生しているようです。あなたの幅の問題か制御ブールの問題かどうかを判断するために、より高い幅を試してみましょう。残念ながら、私はコントロールを強制する方法を見つけることができず、オーディオプレーヤーをより広くする必要がありました。

関連する問題