微信浏览器播放音频的问题:preload属性
测试工具:ios微信。
h5的Audio对象有个很重要的属性:preload;preload 属性规定是否在页面加载后载入音频。有4个值:
auto - 当页面加载后载入整个音频
meta - 当页面加载后只载入元数据
none - 当页面加载后不载入音频
空字符串 - 等效于auto属性
对于Audio对象,如果不需要展示播放界面,我们完全可以在js里构造这个对象:
var audio = new Audio;
audio.preload = 'none';//设置none属性
//当点击第一个div元素是播放音频
document.getElementsByTagName('div')[0].addEventListener('click', function () {
audio.play()
},false)
如果是考虑到初次加载页面显示快慢的问题,我们完全可以将preload设置为'none',这样就不会在页面首次加载的时候下载音频资源。
以上做法在safari(手机浏览器)和chrome(电脑浏览器)里,没有任何问题,打开chrome的network,发现页面初始化确实不会加载音频,只有当点击的时候,调用auido的play()方法时,才会下载音频。但是,事情并没有那么顺利,我们在ios的微信里,发现根本不播放音频。解决办法:
1.不设置preload值或者设置preload为auto,微信浏览器都可以播放,但是页面音频比较多,第一次都会加载,网页速度慢。
2.在设置audio.preload = 'none',不提前加载的情况下:用微信内置的方法:
if(typeof WeixinJSBridge === 'object'){
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
audio.play();
});
}else{
audio.play()
}
注意,网上有很多资料说要用:document.addEventListener("WeixinJSBridgeReady")。我测试的都不会触发这个事件!!!
微信浏览器播放音频的问题:preload属性的更多相关文章
- egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...
- firefox浏览器播放音频
之前做的系统,在firefox浏览器下有更好的使用体验.因此要求客户统一使用firefox浏览器,前段时间客户要求在系统中加入音频效果. 在网上查了下,主要用到的标签有<bgsound>, ...
- video 标签在微信浏览器的问题解决方法
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题: 在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设 ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- iphone在微信中audio 音频无法自动播放
问题: Html5的audio 音频在电脑端和android端都可以实现自动播放,在iphone上无法实现,下面针对的是微信浏览器里面的解决方法 html代码: <div id="au ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- 【bug解决】ios微信浏览器中背景音乐无法播放
我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决H5微信浏览器中audio兼容-- 背景音乐无法自动播放
我们知道,ios 在safari浏览器中,audio标签不能在没有用户交互的情况下自动播放或有js直接控制播放,这是系统限制的一些原因. 但是背景音乐在微信浏览器可以设置自动播放,config配置一下 ...
随机推荐
- android 特殊符号开头的联系人归并至“#”下
在PeopleActivity界面.联系人的显示位置是由其display name的第一个字符决定的. 数字开头的联系人会显示在"#"这个header下. 中英文联系人会显示在&q ...
- tomcat的HTTPS
完美配置Tomcat的HTTPS 博客分类: Tomcat HTTPS Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.l ...
- Spring和SpringMVC的关系
1.Spring和SpringMVC是父子容器关系. 2.Spring整体框架的核心思想是容器,用来管理bean的生命周期,而一个项目中会包含很多容器,并且它们分上下层关系,目前最常用的一个场景是在一 ...
- Android Jni层 创建 linux socket 出错问题解决
问题: 想在Jni层创建 udp socket 与服务端通信,可是没有成功.最后发现居然是创建socket失败(代码例如以下) // create socket g_sd = socket(AF_IN ...
- ibatis 取消查询动态列的缓存
ibatis在查询结果列不确定(或是动态变化)的情况下,会因为列缓存的原因导致变化后的列数据查不出来 解决方法是: select标签有个属性remapResults,该属性默认值为false,设置成r ...
- 【Android】Android输入子系统【转】
本文转载自:https://www.cnblogs.com/lcw/p/3506110.html Linux输入子系统回顾 1:为什么要回顾linux输入子系统?这个问题后面自然就知道了 1.linu ...
- Email-ext plugin
https://wiki.jenkins.io/display/JENKINS/Email-ext+plugin General This plugin extends Jenkins built i ...
- 多台Mac电脑使用同一个apple开发者账号测试
因为公司有苹果一体机,家里有macbook和黑苹果台式机,多台电脑用同一个开发者账号,每次真机调试时都是选择直接reset,回到另外一台电脑,又要重新设置,太麻烦了.直到最近才设置三台电脑都可以,分享 ...
- POJ1584 A Round Peg in a Ground Hole 凸包判断 圆和凸包的关系
POJ1584 题意:给定n条边首尾相连对应的n个点 判断构成的图形是不是凸多边形 然后给一个圆 判断圆是否完全在凸包内(相切也算) 思路:首先运用叉积判断凸多边形 相邻三条边叉积符号相异则必有凹陷 ...
- TI BLE: Advertisement
#define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...