我正在开发一个 Web 应用程序，但我在 PC 上遇到了与 Apple 设备和 Safari 的兼容性问题。
Html5 音频标签:
<audio controls> <source src="/audio/en/file.mp3" type="audio/mpeg"> <source src="/audio/en/file.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
- 我只想使用基本控件播放音频文件。
- 之前的代码在 Chrome、Opera、Firefox(Windows 和 Android 设备)上完美运行。
- 但是 Controller 不会出现Safari(已在 PC、iPad 和 iPad mini 上用最新版本测试)。
- 音频播放器的背景为灰色，只有“播放/暂停”功能。
- 这是描述我的问题的屏幕截图:
谢谢。
最佳答案
我遇到了完全相同的问题。
我的解决方案:我添加了音频文件源的完整 URL。不知道为什么，但它有所作为。这是我的完整代码。 CSS 修改只是为了隐藏下载按钮。但是当我把它拿出来时，我看不到时间线。很奇怪，但正是这段代码对我有用。
<!DOCTYPE html>
<html>
<head>
<title>html5 audio player on iPhone</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
display:none;
}
audio::-webkit-media-controls-enclosure {
overflow:hidden;
}
audio::-webkit-media-controls-panel {
width: calc(100% + 33px);
}
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
<source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><br />
</body>
</html>
关于ios - Safari 和 iOS 上的 Html5(音频)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24881807/