前端 - HTML5的audio标签设置了autoplay属性在手机端出现的问题
伊谢尔伦
伊谢尔伦 2017-04-17 11:22:55
[HTML讨论组]

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

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(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等)

PHP中文网

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

高洛峰

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

黄舟

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

伊谢尔伦

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号