解决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的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
css3实现图片遮罩效果鼠标hover以后出现文字
Nov 05 HTML / CSS
CSS3 @keyframes简单动画实现
Feb 24 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 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 current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python中dict和set的用法讲解
2019/03/28 Python
如何使用python进行pdf文件分割
2019/11/11 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
销售人员自我评价怎么写
2013/09/19 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
银行求职信模板
2015/03/20 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
父亲节感言
2015/08/03 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS