解决在微信中部分IOS不能自动播放背景音乐
前言
在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求。我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的。直到微信火爆起来,我们发现IOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了我之前的认知。但是,但是。。。最近的项目,又发现了一个头疼的问题。部分的IOS微信,打开有自动播放背景音乐的页面没有声音!!最头疼的是同款机子,相同的IOS系统,相同的微信版本!!没错,前端就是要经常这么折腾的,同一个问题,你以为找到了最终的解决方案,但是各种浏览器更新快速,昨天没问题,也许今天就有问题了。还好,这个问题暂时找到原因了,详情请看下文。
先看下平时使用audio标签插入背景音乐的代码:
<audio id="Jaudio" class="media-audio" src="bg.mp3" autoplay preload loop="loop"></audio >
正常来说,上面的写法在安卓和大部分IOS机子的微信是可以播放的(safari这里就忽略讨论)
如果不能播放, 使用微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!
function audioAutoPlay(id){
var audio = document.getElementById(id);
audio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio.play();
}, false);
}
audioAutoPlay('Jaudio');
总结下
关于音乐自动播放的问题,现在可以分为三种:
1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)
2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)
3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)
经测试iphone6上的6.5.4版本微信还是支持以上方式
解决在微信中部分IOS不能自动播放背景音乐的更多相关文章
- iphone在微信中audio 音频无法自动播放
问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...
- 微信中音乐播放在ios不能自动播放解决
在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放. //音乐 var x = document.getElementById("myAudi ...
- 关于移动端input框 在微信中 和ios中无法输入文字的问题
这个是一个提交的页面但是总是无法输入进去文字 在uc中是可以的 但是在微信中 或者ios自带浏览器是无法输入的 绞尽脑汁 找了半天 才发现自己多加了一段代码(这个代码是模版中自带的 我靠) ...
- iOS苹果和微信中音频和视频实现自动播放的方法
通过下面的方式可以解决,在iPhone手机微信中正常自动播放. 必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效,猜测微信接口做了处理~ <audio prel ...
- iOS - 如何自动播放H5中的音频
场景:iOS端设备,App页面跳转到H5产品介绍,背景音乐无法播放.(为什么不能自动播放,因该是iPhone人性化设定吧~) 加载H5用UIWebView空间: 代码: CGRect rect = s ...
- H5-video1 iOS苹果和微信中音频和视频实现自动播放的方法
<audio preload="preload" controls id="car_audio" src="http://media.xitao ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- 解决audio和video在手机端无法自动播放问题
各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放 <audio src="music/bg.mp3" autoplay loop contro ...
- (IOS可自动播放)使用bxslider做了一个切换图片跟随播放MP3的功能
代码: <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset=" ...
随机推荐
- DataGridView使用技巧二:设置单元格只读
一.修改ReadOnly属性 1.设置整个DataGridView只读: DataGridView.ReadOnly=true; 此时用户的新增行和删除行操作也被屏蔽了. 2.设置DataGridVi ...
- [mysql] mysql-myibatis-整理
==================================== insert ========================================== 语句1 <inser ...
- 使用特殊构造的5GB文件测试Win2012Dedup功能
WinServer2012一个崭新的功能就是支持重复数据删除功能.为了测试这个功能的情况,特别构造了一个特殊的5GB文件用于此次测试.惯例,先说下测试环境的搭建1 使用ESXi5上的版本8的VM,安装 ...
- 最小顶点覆盖(Minimum Vertex Cover)与最大独立集(Maximum Independent Set)
问题描述:就是在图中找最小的点集,使得覆盖所有边. 和独立集等价:独立集问题:在图中找最大的点集,使得点集内的所有点互不相连. 引理:顶点覆盖集和独立集互补. 上面这个引理使得这两个问题可以相互规约, ...
- Deep Learning 经典网路回顾#之LeNet、AlexNet、GoogLeNet、VGG、ResNet
#Deep Learning回顾#之LeNet.AlexNet.GoogLeNet.VGG.ResNet 深入浅出——网络模型中Inception的作用与结构全解析 图像识别中的深度残差学习(Deep ...
- Windows上建立、取消共享文件夹
建立共享文件夹 1.创建一个文件夹test 2.右键属性,点击共享 4.在另外一台机器上访问该共享文件 取消共享文件夹 右键属性,点击高级共享
- Zookeeper 工作流
一旦ZooKeeper集合启动,它将等待客户端连接.客户端将连接到ZooKeeper集合中的一个节点.它可以是leader或follower节点.一旦客户端被连接,节点将向特定客户端分配会话ID并向该 ...
- CentOS 6.5 下利用命令行截图及设置快捷键截图
CentOS 6.5 下利用命令行截图及设置快捷键截图 1.利用命令模式 捕获整个屏幕 : $ gnome-screenshot 截完屏之后我们可以设置自定义图片存储位置,如图: 捕获当前终端Term ...
- Unity简介
Unity (也称 nity3D) 是一套包括图形. 声音.物理等功能的游戏引擎,提供了一个强大的关卡编辑器,支持大部分主流 3D 软件格式,使用 C# JavaScript 等高级语言实现脚本功能, ...
- oracle当前月添加一列显示前几个月的累计值
create table test_leiji(rpt_month_id number(8), current_month NUMBER(12,2)); ...