html5播放器按菜单键没反应(解决HTML5中的audio在手机端和微信端的不能自动播放问题)
类别:Web前端 浏览量:283
时间:2021-10-03 01:12:32 html5播放器按菜单键没反应
解决HTML5中的audio在手机端和微信端的不能自动播放问题再做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在手机端和微信端的不能自动播放问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5怎么修改背景颜色(HTML5 body设置全屏背景图片的示例代码)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- html5创作(HTML5录音实践总结Preact)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5文档的基本结构及必要的注释(关于HTML5+ API plusready的兼容问题)
- html5中canvas标签(html5 canvas绘制网络字体的常用方法)
- html5拖拽标签(Html5原生拖拽相关事件简介以及基础实现)
- html5播放视频的元素(HTML5在手机端实现视频全屏展示方法)
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- html5的文件类型声明(浅析HTML5中的download属性使用)
- html5的语法变化(详解HTML5.2版本带来的修改)
- html5元素列表(HTML5触摸事件touchstart、touchmove和touchend的实现)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5长按动画效果(HTML5实现移动端弹幕动画效果)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
热门推荐
- 前端app开发适配消息栏(AmazeUI 加载进度条的实现示例)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- docker容器内查看内存占用(docker 查看进程, 内存, cup消耗的情况)
- 微信小程序css使用技巧(微信小程序 CSS filter滤镜的使用示例详解)
- 如何用tomcat部署web项目(一文搞懂如何部署启动多个tomcat并移植项目)
- dedecms联动使用教程(dedecms联动类别的图文使用方法)
- 用python简单实现登录功能(使用python的pexpect模块,实现远程免密登录的示例)
- css布局详细介绍(浅谈CSS 栅格系统布局原理分析)
- dedecms列表栏目样式修改(在dedecms文章页中获取当前栏目字段如content字段)
- docker node 分阶段构建(Docker安装、创建镜像、加载并运行NodeJS程序的详细过程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9