解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种:
第一种:添加控制属性(controls)
原理:直接使用行内式添加controls属性,显示控制按钮,让用户手动触发音频播放
<audio autoplay="autopaly" loop="loop" controls="controls" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
第二种:创建页面监听(WeixinJSBridgeReady)
原理:对页面加载进行监听,等待微信客户端页面加载完毕后,自动触发音频播放
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {
document.getElementById('audios').play()
})
</script>
第三种:创建触摸监听(touchstart)
原理:当浏览器打开页面时,通过触摸屏幕事件,来触发音频播放
<audio autoplay="autopaly" loop="loop" id="audios">
<source src="music/bg.mp3" type="audio/mp3" />
</audio>
<script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {
document.getElementById('audios').play()
})
</script>
第四种:综合以上自定义Func实现交互触发play()
不推荐此方法,上面三种方法足以解决日常问题
<audio src="bg.mp3" id="audios" autoplay preload loop="loop"></audio>
<script>
function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('audios');
</script>
https://www.cnblogs.com/viphchok/p/5315031.html
图片加载完成:
https://blog.csdn.net/hbiao68/article/details/52683322
解决移动端浏览器 HTML 音频不能自动播放的三种方法的更多相关文章
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- 在网页中JS函数自动执行常用三种方法
在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT LANGUAGE="JavaScript"> function ...
- Postgresql 创建主键并设置自动递增的三种方法
Postgresql 有以下三种方法设置主键递增的方式,下面来看下相同点和不同点. --方法一create table test_a ( id serial, name character var ...
- 解决swfupload上传控件文件名中文乱码问题 三种方法 flash及最新版本11.8.800.168
目前比较流行的是使用SWFUpload控件,这个控件的详细介绍可以参见官网http://demo.swfupload.org/v220/index.htm 在使用这个控件批量上传文件时发现中文文件名都 ...
- 解决MySQL安装到最后一步未响应的三种方法
这种情况一般是你以前安装过MySQL数据库服务项被占用了.解决方法: 方法一:安装MySQL的时候在这一步时它默认的服务名是“MySQL” 只需要把这个名字改了就可以了.可以把默认的服务器的名称手动改 ...
- 【转】SQL 2008 Insert返回自动编号id三种方法比较
SQL Server 2008中,insert数据的时候返回自动编号的id,有三种方法实现SCOPE_IDENTITY.IDENT_CURRENT 和 @@IDENTITY, 它们都返回插入到 IDE ...
- SQL SERVER2008及以上版本数据库自动备份的三种方法
方法一:创建一个维护计划对数据库进行备份 方法二:创建一个SQL作业对数据库进行备份 方法三:创建WINDOWS任务计划对数据库进行备份 方法一与方法二其实原理基本相同,都必需开启SQL代理服务,都会 ...
- Win10怎么添加开机启动项?Win10添加开机自动运行软件三种方法
Win10管理开机启动项的方法相信大家已经非常熟悉,msconfig命令各系统都通用,那么很多用户发觉Win10和Win7 XP等系统不同,没有启动文件夹,那么我们怎么添加开机启动项呢?如晨软件或程序 ...
- 网页中JS函数自动执行常用三种方法
(1)最简单的调用方式,直接写到html的body标签里面: <body onload="myFunction()"></body> ...
随机推荐
- 13.Python字符串详解(包含长字符串和原始字符串)
简单地理解,字符串就是“一串字符”,也就是用引号包裹的任何数据,比如“Hello,Charlie”是一个字符串,“12345”也是一个字符串. Python 要求,字符串必须使用引号括起来,可以使用单 ...
- 微信小程序_(视图)简单的scroll-view容器
scroll-view容器效果 官方文档:传送门 scroll-view 可滚动视图区域 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许 ...
- Nginx配置记录【例1】
A服务器,例: [root@localhost conf.d]# egrep -v "^#|^$" /etc/nginx/nginx.conf user nginx; worker ...
- 数据重塑图解—Pivot, Pivot-Table, Stack and Unstack
Pivot pivot函数用于创建一个新的派生表,该函数有三个参数:index, columns和values.你需要在原始表中指定这三个参数所对定的列名,接下来pivot函数会创建一个新的表格,其中 ...
- Zookeeper入门(五)之Linux环境下Zookeeper安装
本文参考地址为:http://www.mamicode.com/info-detail-2243059.html1.安装wget http://archive.apache.org/dist/zook ...
- 【python】windows更改jupyter notebook(ipython)的默认打开工作路径
写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...
- 问题:解决上传文件IE浏览器弹出下载框bug?
控制器方法的返回值必须以String返回,再由js处理转换成json对象 $.ajaxFileUpload({ url: "/project/proj_conver_upload&quo ...
- Java-Thread 线程
一.进程与线程的概念 进程和线程都是一个CPU工作时间段的描述,只是关注点不同. 进程(Process): 资源(CPU,内存等,文件,网络等)分配的基本单位.系统中有很多进程,它们都会使用内存.为了 ...
- ajaxform和ajaxgird中添加数据
ajaxform添加数据 ajaxform.setRecord(response.getAjaxDataWrap("dataWrapBill").getData()); ajaxg ...
- Android Studio设置国内镜像代理
点击主面板右下角的Configure –> settings –> Appearance & Behavior –> System Settings –> HTTP P ...