iOS HTML5 音频控件未显示
Mur*_*976 7 html css audio ipad ios
我正在为我公司的音频播放器进行一些音频支持测试，并展示一系列 HTML5 音频播放器，以了解通过简单的 HTML5 音频播放器支持哪些可用格式。这里的格式没有问题，只是对我正在做的事情的解释。
玩家在 Windows Chrome、Firefox 和 IE11、Mac Chrome、Firefox 和 Safari、Android Internet、Chrome 和 Firefox 上按应有的方式显示......但当涉及到 iPad 和 iPhone 时，这就是暮光之城剧集开始的地方。
每个音频元素中可见的全部内容是 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 显示内容的屏幕截图；
| 归档时间： |
|
| 查看次数： |
3315 次 |
| 最近记录： |