解决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 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
css3高级选择器使用方法
Dec 02 HTML / CSS
CSS3实现超慢速移动动画效果非常流畅无卡顿
Jun 15 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
Jan 30 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
Nov 19 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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
PHP 批量删除 sql语句
2009/06/05 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php中final关键字用法分析
2016/12/07 PHP
PHP超低内存遍历目录文件和读取超大文件的方法
2019/05/01 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
2018/10/10 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
浅析Git版本控制器使用
2017/12/10 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
小班重阳节活动方案
2014/02/08 职场文书
个人租房协议书样本
2014/10/01 职场文书
最美乡村教师观后感
2015/06/11 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers