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

通常解决方法是给一个交互事件,一定要是交互事件

  1. 标签:<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
  2.  
  3. 里面的属性我就不多做解释了,可以自己百度
  4.  
  5. 解决方法:
  1. //--创建页面监听,等待微信端页面加载完毕 触发音频播放
  2. document.addEventListener('DOMContentLoaded', function () {
  3. function audioAutoPlay() {
  4. var audio = document.getElementById('audio');
  5. audio.play();
  6. document.addEventListener("WeixinJSBridgeReady", function () {
  7. audio.play();
  8. }, false);
  9. }
  10. audioAutoPlay();
  11. });
  12. //--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
  13. document.addEventListener('touchstart', function () {
  14. function audioAutoPlay() {
  15. var audio = document.getElementById('audio');
  16. audio.play();
  17. }
  18. audioAutoPlay();
  19. });
  1. 但是又一种针对苹果的手机微信端的解决方法
    第一步:引入js文件
  1. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

第二步:配置文件

  1. <script>
  2. function autoPlayVideo(){
  3. wx.config({
  4. debug:false,
  5. appId:"",
  6. timestamp:1,
  7. nonceStr:"",
  8. signature:"",
  9. jsApiList:[]
  10. });
  11. wx.ready(function(){
  12. var autoplayVideo=document.getElementById("audio");
  13. autoplayVideo.play()
  14. })
  15. };
  16. autoPlayVideo();
  17. </script>

这样在网络稳定的情况下是可以自动播放的!如果有其他的解决方法欢迎随时交流!

  1.  

HTML5中的audio在手机端和 微信端的自动播放的更多相关文章

  1. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  2. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  3. ios vue2.0使用html5中的audio标签不能播放音乐

    我写了一个M端播放音乐的组件,使用html5的audio标签 然后我使用watch监测currentSong 在浏览器中看到audio渲染的如下: 单独访问渲染出来的audio中url可以播放音乐,为 ...

  4. html5中的audio和video属性和事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制 <video> 标 ...

  5. H5的audio在ios系统的微信上不能自动播放的问题

    前几天有个需求,要在H5页面中添加背景音乐,本以为很easy,却也踩了一些坑,废话不多说,进入正题: 撸完代码测试的时候才发现在安卓手机上背景音乐可以正常播放,但在iphone里的微信和safari中 ...

  6. 关于HTML5中hash部分API在历史管理,选项卡自动跳转中的一点使用

    在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录 ...

  7. html5 -audio-移动端如何自动播放

    最近在做一些活动类页面或者类似于易企秀类型的轻应用经常遇到关于audio标签的应用,对于audio相关的常用知识点以及一些相关的问题如下: <audio id="audios" ...

  8. 新版微信h5视频自动播放

    微信最近升级了新版本,直播视频不能自动播放,经过了一番探索,发现下列方法可以实现自动播放. if (typeof WeixinJSBridge == "undefined") { ...

  9. 解决 iPhone 微信 H5 无法自动播放音乐问题

    使用 wx sdk 在html导入sdk js文件.(如果网站是https导入的sdk也要使用https!) 然后在 wx.ready 中设置 play 方法并复制给全局变量 fm,当需要使用的时候再 ...

随机推荐

  1. ATM JAVA实现 部分代码

    package score;//信1705-2 20173600 王重阳 import java.util.Scanner; public class Main { public static voi ...

  2. Python操作Mysql数据库——多表组合查询

    前面我们介绍了单张表的查询,包括模糊查询.分组.排序.各种筛选条件等等操作,在实际应用中,查询的数据往往不止局限在一张表里,通常需要多张表在一起进行组合查询,今天我们将会对Mysql当中的多张有关联的 ...

  3. adg的数据传输应用三大模式转换

    1.最大可用性模式(Maximum Availability) 1)该模式提供了仅次于"最大保护模式"的数据保护能力: 2)要求至少一个物理备库收到重做日志后,主库的事务才能够提交 ...

  4. 20165317Java实验三敏捷开发与XP实践

    实验三 敏捷开发与XP实践实验报告 实验目的 安装 alibaba 插件,解决代码中的规范问题.再研究一下Code菜单,找出一项让自己感觉最好用的功能. 在码云上把自己的学习搭档加入自己的项目中,确认 ...

  5. LeetCode 226 Invert Binary Tree 解题报告

    题目要求 Invert a binary tree. 题目分析及思路 给定一棵二叉树,要求每一层的结点逆序.可以使用递归的思想将左右子树互换. python代码 # Definition for a ...

  6. elastic search范围查询

    queryBuilder.must(QueryBuilders.rangeQuery("pt_longitude").from(minLongitude).to(maxLongit ...

  7. java ftp上传文件

    /** * 上传文件到ftp * @param server * @param user * @param pwd * @param filenames */ public static void u ...

  8. Numpy 机器学习三剑客之Numpy

    NumPy是Python语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.Numpy内部解除了Python的PIL(全局解释器锁),运算效率极好,是大量机 ...

  9. Java如何对List集合的操作方法(二)

    4.list中查看(判断)元素的索引: 注意:.indexOf(): 和  lastIndexOf()的不同:   ///*************************************** ...

  10. bzoj 2563 [2012国家集训队Round 1 day2] 阿狸和桃子的游戏 贪心

    正解:贪心 解题报告: 链接在这儿! 知道解法之后会jio的好像很简单的样子……其实挺难想到的QAQ 不过大佬讲了方法之后还是懂了 有一个很神仙的想法就是,你可以理解为每个点周围的边都有半个是自己的, ...