Safari&上的HTML5(音频)的iOS [英] Html5 (audio) on Safari & iOS
本文介绍了Safari&上的HTML5(音频)的iOS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Web应用程序，但是与Apple设备和&兼容存在一个兼容性问题. PC上的Safari.
I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.
<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上测试了最新版本).
- 音频播放器的背景为灰色，仅播放/暂停"功能.
- 以下是描述我的问题的屏幕截图:
- I just want to play an audio file with basic controls.
- The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
- But controlers do no appear with Safari (tested with the latest version on PC, iPad & iPad mini).
- Audio player have a grey background with only "play/pause" function.
- Here is a screenshot that describes my problem :
谢谢.
推荐答案
我遇到了完全相同的问题.
I had exactly the same problem.
我的解决方案:我添加了音频文件源的完整URL.不知道为什么，但这有所作为.这是我的完整代码. CSS修改只是为了隐藏下载按钮.但是，当我将其取出时，看不到时间表.很奇怪，但是这段代码确实适合我.
My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.
<!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>
这篇关于Safari&上的HTML5(音频)的iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
