iOS HTML5 音频控件未显示答案

【问题标题】：iOS HTML5 Audio Controls are NOT showing upiOS HTML5 音频控件未显示
【发布时间】：2017-03-07 20:03:39
【问题描述】：

我正在对我公司的音频播放器进行一些音频支持测试，并展示了一系列 HTML5 音频播放器，以查看我们的哪些可用格式通过简单的 HTML5 音频播放器得到支持。这里的格式没有问题，只是对我在做什么的解释。

播放器在 Windows Chrome、Firefox 和 IE11、Mac Chrome、Firefox 和 Safari、Android Internet、Chrome 和 Firefox 上的显示效果应有尽有……但对于 iPad 和 iPhone，这就是 Twilight Zone剧集开始。

每个音频元素中可见的只有 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 显示内容的屏幕截图；

【问题讨论】：

您有没有找到解决方案的机会？我遇到了同样的问题。
是的，你找到解决办法了吗？
我能想出的唯一解决方案 - 请注意，这已经 2 岁了.... 是使用第三方插件，例如 MediaElement.js
肯定还有其他人在使用早期版本的 videojs 并遇到同样的问题。轻松修复！ .vjs-mute-control { display: inline-block !important } 来源：github.com/videojs/video.js/issues/4478

标签： html ios css ipad audio

【解决方案1】：

似乎控件正在显示，只是与计算机上的 HTML5 中使用的控件不同。您可以看到播放/暂停按钮，而不是当前位置滑块。

【讨论】：

这就是我所说的......第三段的开头。那和 AirPlay 按钮（如果适用）

【解决方案2】：

我遇到了类似的问题，而且问题似乎只在音频播放器不够宽时才会出现。尝试更高的宽度（我们将手机横向翻转）以确定它是宽度问题还是控件布尔问题。不幸的是，我无法找到强制控制的方法，最终不得不让音频播放器更宽。

【讨论】：