再做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在手机端和 微信端的自动播放的更多相关文章

  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. Codeforces 180C - Letter - [简单DP]

    题目链接:http://codeforces.com/problemset/problem/180/C 题意: 有一段字符串,包含大小写字母,每次可以将其中一个字母由大写变成小写,或者小写变成大写.要 ...

  2. PE/ELF文件里面存的是什么呢?

    malloc分配的空间是连续的吗?PE/ELF文件里面存的是什么呢?

  3. Usage of git

    目录 Git 配置 查看配置信息 基本概念 Git 创建仓库 git init git clone 撤销操作 从暂存区恢复文件 从仓库恢复某个文件 版本退回 版本前进 分支操作 删除未跟踪的文件 连 ...

  4. mysql root看不到mysql表

    1.首先停止mysql服务:service mysqld stop2.加参数启动mysql:/usr/bin/mysqld_safe --skip-grant-tables & 然后就可以无任 ...

  5. LeetCode 690 Employee Importance 解题报告

    题目要求 You are given a data structure of employee information, which includes the employee's unique id ...

  6. 《HTTP - http首部信息》

    推荐一首歌 - 僕が死のうと思ったのは (曾经我也想过一了百了) 也就听了几十遍而已 经历一番波折,终于正式到了北京. 刚开始是很艰难的,多走两步就好了,不是么. 1:首部字段 Cache-Contr ...

  7. 基于w2v词向量聚类出现的问题(有待解决)

    1.训练词向量代码如下:#训练词语为向量表示def w2v_train(self): ques = self.cu.execute('select question from activity')#将 ...

  8. oracle常见的执行计划

    访问表的执行计划: 全表扫描:TABLE ACCESS FULL ROWID扫描:TABLE ACCESS BY USER ROWID (ROWID来源于用户在where条件中的指定)或 TABLE ...

  9. Ubuntu上Xilinx ARM交叉编译器安装

    1,Windows中下载交叉编译器 2,在ubuntu中创建zedboard目录,并将交叉编译器复制进来 3,将该交叉编译器设置成可执行程序 chmod  a+x  xilinx-2011.09-50 ...

  10. (1.7)mysql profiles分析

    mysql profiles分析 作用:记录会话查询SQL所用时间 1.开启 2.使用 [2.1]先使用一个查询 [2.2]然后再运行 show profiles; [2.3]查看执行过程中每个状态和 ...