首页 文章

Safari和iOS上的Html5（音频）

提问于
浏览 次
9

我正在开发一个Web应用程序，我在PC上遇到Apple设备和Safari的兼容性问题 .

Html5音频标签：

<音频控制>

<source src =“/ audio / en / file.mp3”type =“audio / mpeg”> <source src =“/ audio / en / file.ogg”type =“audio / ogg”> 您的浏览器不支持音频元素 . </音频>

  • 我只想播放带有基本控件的音频文件 .

  • 以前的代码适用于Chrome，Opera，Firefox（Windows和Android设备） .

  • 但 controlers do no appear 与 Safari （在PC，iPad和iPad mini上测试最新版本） .

  • 音频播放器的背景为灰色 only "play/pause" function .

  • 以下是描述我的问题的屏幕截图：

Image

谢谢 .

ios html5 audio safari compatibility

2 回答

  • 4

    这可能听起来很奇怪，但请检查您的HTML页面是否为第一行 .

    <!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...

    众所周知，Safari没有正确的DOCTYPE就不会呈现HTML-5内容 .

    更多信息：http://www.wimpyplayer.com/docs/common/doctype.html

    回复于
  • 1

    我有完全相同的问题 .

    我的解决方案：我添加了audiofile源的完整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>
    
</body>
</html>
    回复于

相关问题