解决移动端浏览器 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> ...
随机推荐
- pip安装源和虚拟环境的搭建
一.pip安装源 1.介绍 采用国内源,加速下载模块的速度 常用pip源: 豆瓣:https://pypi.douban.com/simple 阿里:https://mirrors.aliyun.co ...
- 「CF 961G」Partitions
题目链接 戳我 \(Solution\) 首先,这个直接推式子.自己推去 所以我们来想一想一些巧妙的方法 \(|S|\sum w_i\) 可以转化为:划分好集合后,每个点都对当前点有\(w_i\)的贡 ...
- 【个推CTO谈数据智能】之我们理解的数据中台
引言 在本系列的前面两篇文章(<数据智能时代来临:本质及技术体系要求>和<多维度分析系统的选型方法>)之中,我们概括性地阐述了对于数据智能的理解,并根据工作中团队涉及到的多维度 ...
- uswgi
1.安装uwsgi注意: 1)在系统环境安装,非虚拟环境 2)使用对应python版本安装 3)要先安装python开发包 ###sudo apt-get install python3.6-dev ...
- AOI 设计
http://blog.csdn.net/zhanghefu/article/details/25833535 云风的Blog 并进行整理而写. AOI(Area Of Interest),中文就是感 ...
- 利用Zookeeper实现分布式锁
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- DataV数据可视化功能特性
使用DataV制作实时销售数据可视化大屏 (本课程可以帮助数据分析师学习数据可视化大屏的制作,包括制作的方法.设计原则等基础知识,并提供一个微项目,使用数加的DataV基于ABC公司的经营数据,快速构 ...
- shell初级-----处理用户输入
命令行参数 读取参数 位置参数变量是标准的数字:$0是程序名,$1是第一个参数,$2,是第二个参数,直到第九个参数$9. 特殊的变量:$#表示参数个数,$?表示最后运行的命令的结束代码(返回值) 每个 ...
- Android HandlerThread与IntentService
HandlerThread本质上是一个线程类,它继承了Thread: HandlerThread有自己的内部Looper对象,可以进行looper循环: 通过获取HandlerThread的loope ...
- leetcode 123. 买卖股票的最佳时机 III
使用动态规划的解法,空间复杂度O(2*2)如果交易k次则为O(2*k),时间复杂度O(2n),交易k次为O(n*k), 因此本题实际上可以退化为买卖一次的情况:去掉buy2和sell2,即leetco ...