解决HTML5中的audio在手机端和微信端的不能自动播放问题


Posted in HTML / CSS onNovember 04, 2019

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的

通常解决方法是给一个交互事件:

标签:

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">

该浏览器不支持audio属性</audio>

解决方法:

//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});

还有一种针对苹果的手机微信端的解决方法

第一步:引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

第二步:配置文件

<script>
        function autoPlayVideo(){
            wx.config({
                debug:false,
                appId:"",
                timestamp:1,
                nonceStr:"",
                signature:"",
                jsApiList:[]
            });
            wx.ready(function(){
                var autoplayVideo=document.getElementById("audio");
                autoplayVideo.play()
            })
        };
        autoPlayVideo();
</script>

这样在网络稳定的情况下是可以自动播放的。

总结

以上所述是小编给大家介绍的解决HTML5中的audio在手机端和微信端的不能自动播放问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
利用css3-animation实现逐帧动画效果
Mar 10 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 MiranaVideo播放器 (代码开源)
Jun 11 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
You might like
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
2020/11/07 Javascript
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
学校卫生检查制度
2014/02/03 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
Python各协议下socket黏包问题原理
2022/04/12 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL