Safari和iOS上的Html5(音频)
cca*_*rez 11 safari audio html5 compatibility ios
我正在开发一个Web应用程序,我在PC上遇到Apple设备和Safari的兼容性问题.
Html5音频标签:
Run Code Online (Sandbox Code Playgroud)<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设备).
- 但是控制器没有出现在Safari中(在PC,iPad和iPad mini上测试最新版本).
- 音频播放器具有灰色背景,仅具有"播放/暂停"功能.
- 这是一个描述我的问题的屏幕截图:
谢谢.
看来实际的“修复”对我来说真的很简单 - 我所需要的只是确保<audio>标签有足够的宽度来显示所有控件。请参阅下面的屏幕截图
上版本
<audio controls preload="auto" style="width:100%;" >
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
底部版本
<audio controls preload="auto">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
小智 6
我有完全相同的问题。
我的解决方案：我添加了音频文件源的完整 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>
| 归档时间： |
|
| 查看次数： |
17985 次 |
| 最近记录： |