HTML5的audio标签设置了autoplay属性在手机端出现的问题

audio标签设置autoplay了,也设置了js的播放依然无法在手机端网页自动播放(微信),是否手机浏览器大都禁用了自动播放的功能,有没有其他接口

阅读 20.3k
6 个回答

Safari屏蔽了autoplay,必须由用户交互事件触发,因为autoplay在移动网络环境下可能会造成用户流量费剧增
Android的我不清楚,下面是引自Safari Reference

In Safari on iPhone OS (for all devices, including iPad), where the
user may be on a cellular network and be charged per data unit,
autobuffering and autoplay are disabled. No data is loaded until the
user initiates it. This means the JavaScript play() and load() methods
are also inactive until the user initiates playback, unless the play()
method is triggered by user action.

iOS 3.2之前还有一种fake的方式,可以通过js模拟一个点击事件来触发,但在之后的版本中就不再有效了

目前没有其他任何办法可以实现autoplay

不仅仅是在微信里面无法自动播放,系统浏览器也是无法自动播放的,必须由用户交互触发。

(ps:低版本的安卓可以自动播放,小米1s等)

在Android的机子是可以实现自动播放的,在iOS的机子里没有办法,可以通过为页面绑定touchstart事件来实现播放

我见过是document touchstart的时候触发,利用冒泡

新手上路,请多包涵

可以在页面载入自动播放,模拟点击是无效的

移动设备浏览器处理HTML5 audio方法不用浏览器的处理方式不一样,可能无法自动触发,除非用户主动触发,所以你可以使用另外的方式实现,或许下面代码可以帮助你理解:

/* 移动端和桌面事件 */
$('#main').on('click tap swipeUp', function(){
  $.ui.loadContent("#page1",false,false,"up");
  loadbgmusic();
});

以上代码会在用户“点击”或者“滑动”时候触发audio,你可以参考一下:
手机直接访问DEMO

参考源代码:圣诞快乐html5贺卡

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏