解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）
问题描述：项目需要在页面加载完成后自动播放音乐，但在ios中却无法自动播放，需要用户主动触发
解决办法：
$('html').one('touchstart',function(){
document.getElementById('audio2').play();
});
（只触发一次）
解决在微信浏览器中ios audio无法自动播放
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no"/>
<title>IOS微信</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript">
//原来是在微信易信执行Ready之前，先注册事件，所以放在所有请求的最前面
document.addEventListener("WeixinJSBridgeReady", function () {
audioAutoPlay('Jaudio');//给个全局函数
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audioAutoPlay('Jaudio');//给个全局函数
}, false);
</script>
<!-- 加载css放这里 -->
</head>
<body> <audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" 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("touchstart",play, false);
} var isAppInside=/micromessenger/i.test(navigator.userAgent.toLowerCase());
if(!isAppInside){//给非微信易信浏览器
audioAutoPlay(Jaudio);
}
</script>
</body>
</html>
解决audio 在部分移动端浏览器不能自动播放（目前包括ios、微博）的更多相关文章
- [JavaScript] audio在浏览器中自动播放
audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException
转载自:http://www.nooong.com/docs/chrome_video_autoplay.htm 在最新版的Chrome浏览器(以及所有以Chromium为内核的浏览器)中,已不再允许 ...
- 前端 解决swiper js 手动滑动一下后不能自动播放
用户操作swiper之后,是否禁止autoplay.默认为true:停止.如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay.操作包括触碰,拖动,点击pa ...
- ios微信浏览器音乐自动播放
setTimeout(function(){ //一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以 document.getElementById('bgmedia').play() ...
- 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
- 【转】解决chrome浏览器不支持audio和video标签的autoplay自动播放
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- [bug]解决chrome浏览器不支持所有媒体音乐不自动播放问题
声音无法自动播放这个在 IOS/Android 上面一直是个惯例,桌面版的 Safari 在 2017 年的 11 版本也宣布禁掉带有声音的多媒体自动播放功能,紧接着在 2018 年 4 月份发布的 ...
- html5音频audio对象处理以及ios微信端自动播放和息屏后唤醒的判断---可供参考(功能都完整实现了,只是细节还没处理的很好)
// html模版中的 此处结合了weui样式整合的微信手机端片段代码(不可直接粘贴复制进行使用)里面含有一些php的写法,可直接略过..###重点参考js代码### <div> < ...
随机推荐
- P3244 [HNOI2015]落忆枫音
思路 给出了一个DAG,要求以1为根的外向树的个数 如果没有加边的条件,就非常好做 每个点都只保留一条入边,最后得到的一定就是一个符合条件的树了(因为给了一个DAG啊) 所以答案是\(\prod_{i ...
- Shell脚本（三）
摘自:菜鸟教程 http://www.runoob.com/linux/linux-shell-echo.html Shell命令 1. echo命令 字符串输出 echo "OK! \c& ...
- VHDL 类型转换
STD_LOGIC_1164包集合 函 数 名 功 能 TO_STDLOGICVECTOR(A) 由BIT_VECTOR转换为STD_LOGIC_VECTOR TO_BITVECTOR(A) 由STD ...
- 3、Ansible playbooks(Hosts、Users、tasks、handlers、变量、条件测试(when、迭代)、templates)
Ansible playbooks playbook是由一个或多个“play”组成的列表.play的主要功能在于将事先归并为一组的主机装扮成事先通过ansible中的task定义好的角色.从根本上来讲 ...
- RN 使用第三方组件之react-native-image-picker（拍照／从相册获取图片）
首先给个github地址:https://github.com/react-community/react-native-image-picker 英文不行的看下面这个笔记 该插件可以同时给iOS和 ...
- sublime3 mac : Package Control There are no packages available for installation
如下问题: 查看控制台:点击 ctrl+`打开控制台 发现是因为http://packagecontrol.io/channel_v3.json 获取失败,手动下载channel_v3.json文件, ...
- requests：json请求中中文乱码处理
requests库中,在处理json格式的请求时调用的json.dumps方法参数ensure_ascii默认为True.表示序列化时对中文默认使用的ascii编码.如果想要显示中文,则将此参数的值改 ...
- 从classloader的变更说起
classloader从1.6到1.7整体分成了两个版本.重点区别就是并行类加载. 1.6版本 protected synchronized Class loadClass(String name, ...
- 牛客国庆集训派对Day3 G Stones
Stones 思路: sg函数打表找规律 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #in ...
- JAVA中”单引号”，“双引号”，“没有单引号和双引号”区别：
单引号引的数据 是char类型的——>单引号只能引一个字符(表示单个字符)双引号引的数据 是String类型的——>而双引号可以引0个及其以上(引用字符串) char类型的值用单引号引起来 ...