html音频兼容ios,Safari和iOS上的Html5（音频）(Html5 (audio) on Safari & iOS)

最新推荐文章于 2023-08-05 10:29:34 发布

转载最新推荐文章于 2023-08-05 10:29:34 发布 · 1k 阅读

文章标签：

在开发Web应用时遇到HTML5 audio标签在Safari和iOS设备上无法显示控制器的问题，只有播放/暂停功能。解决方案是为audio文件源提供完整URL，配合特定CSS样式隐藏下载按钮并调整播放面板宽度，从而在Safari和iOS上正常显示音频控制器。

Safari和iOS上的Html5(音频)(Html5 (audio) on Safari & iOS)

我正在开发一个Web应用程序，并且在PC上有Apple设备和Safari的兼容性问题。

Html5音频标签：

Your browser does not support the audio element.

我只想用基本控件播放音频文件。

以前的代码在Chrome，Opera，Firefox( Windows和Android设备 )上完美运行。

但Safari上没有出现控制器 ( 用PC，iPad和iPad mini上的最新版本进行测试 )。

音频播放器具有灰色背景，仅具有“播放/暂停”功能。

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

谢谢。

I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.

Html5 audio tag:

Your browser does not support the audio element.

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 :

Thanks.

原文：https://stackoverflow.com/questions/24881807

更新时间：2020-12-09 14:12

最满意答案

我有完全相同的问题。

我的解决方案：我为audiofile源添加了完整的URL。不知道为什么，但它有所作为。这是我的完整代码。 CSS修改只是为了隐藏下载按钮。但是当我把它拿出来的时候，我没有看到时间表。很奇怪，但这个代码恰恰适合我。

html5 audio player on iPhone

audio::-internal-media-controls-download-button {

display:none;

}

audio::-webkit-media-controls-enclosure {

overflow:hidden;

}

audio::-webkit-media-controls-panel {

width: calc(100% + 33px);

}

Your browser does not support the audio element.

I had exactly the same problem.

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.

html5 audio player on iPhone

audio::-internal-media-controls-download-button {

display:none;

}

audio::-webkit-media-controls-enclosure {

overflow:hidden;

}

audio::-webkit-media-controls-panel {

width: calc(100% + 33px);

}

Your browser does not support the audio element.

相关问答

回到解决方案。在文件cordova-plugin-media / blob / master / src / ios / CDVSound.m中，应用以下补丁： // get the audioSession and set the category to allow recording when device is locked or ring/silent switch engaged

if ([self hasAudioSession]) {

...

我有完全相同的问题。我的解决方案：我为audiofile源添加了完整的URL。不知道为什么，但它有所作为。这是我的完整代码。 CSS修改只是为了隐藏下载按钮。但是当我把它拿出来的时候，我没有看到时间表。很奇怪，但这个代码恰恰适合我。

html5 audio player on iPhone

它不支持仅音频捕获，因此以下内容不会产生预期结果： Android支持所有3(视频，音频，图像)。因此，跨Android和iOS的支持如下：通过iOS 10.3上的Sa

...

关于iPhone Safari：当onclick事件启动时，似乎play()工作。请参阅http://groups.google.com/group/iphonewebdev/browse_thread/thread/91e31ba7ae25e6d4?hl=en About iPhone Safari: It seems play() work when launched by an onclick event. See http://groups.google.com/group/iphone

...

此代码(jQuery)适用于iPhone Safari iOS7中的连续播放。即使我的屏幕已锁定/其他标签，它也会在第一个结束时更改跟踪(考虑到加载新轨道的一点耐心)

$('#audio1').on('ended',function(){

$(this).attr('src','song2.mp3');

$(th

...

简短回答：iOS 10增加了可能足够的新功能。如果没有，似乎对多个同步视频的真正支持即将到来。在iOS 10中，您可以在视频上自动播放或调用play()，而无需用户交互，只要它没有声音即可。启动视频不再强制进入全屏播放： https ： //webkit.org/blog/6784/new-video-policies-for-ios/ 但是你仍然无法同时播放多个视频，但该补丁刚刚降落。所以它在路上： https ： //bugs.webkit.org/show_bug.cgi？id =

...