Safari&上的HTML5(音频)的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

上的HTML5

Safari&amp;上的HTML5(音频)的iOS

问题描述

推荐答案

Safari&上的HTML5(音频)的iOS