背景音乐的自动播放(兼容 ios 和 android)

ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截,

除非用户手动点击 交互才会执行 。

但是对于背景音乐,又必须加载的时候就要执行,怎么办,直接调用js 来自动触发。

<audio id="bgaudio" src="./media/bg-music.mp3" loop="loop"></audio>
	<script type="text/javascript">
			document.getElementById('bgaudio').play();
	</script>

不用怀疑 ,就这几行代码,兼容ios 和 android

当然有特别的 ios 设置后  不兼容,我们可以采用下面的方式,不过注意只能在微信浏览器里面打开

<audio preload="preload" controls id="car_audio" src="./media/bg-music.mp3" loop></audio>

	<script>
	 setTimeout(function(){
	     $(window).scrollTop(1);
	 },0);
	  document.getElementById('car_audio').play();
	  document.addEventListener("WeixinJSBridgeReady", function () {
			WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
	            document.getElementById('car_audio').play();
			});
	  }, false);
	</script>
时间: 2024-10-11 06:45:15

背景音乐的自动播放(兼容 ios 和 android)的相关文章

H5中背景音乐无法自动播放问题

苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流. 除非用户物理点击一次屏幕,其实现在不能苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题. 背景音不能自动播放的场景及解决办法 解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览

利用React Native 从0到1 开发一款兼容IOS和android的APP(仿造京东)

最近有一部电视剧叫做<微微一笑很傻逼>里面有个男猪脚,人们都叫他大神~我觉得吧~大神是相对的~所以~啥事都得谦虚! 好了 今天介绍的是如何从0到1利用React Native开发一款兼容IOS和android的仿造京东的APP,是不是很激动?我保证我说的很通俗易懂,当然,大神请滚蛋,这个不适合你看 ok!扯犊子结束,下面开始! 第一步:打开你的手机JD客户端--我们来分析一下 看到了不~在上面的图就是JD客户端的分析图(ok,我承认这图是盗的),从上面的图我们可知道JDAPP的一个页面的主要结

用一个二维码做下载地址,自动区分是 ios 还是 android

用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone  和 ipad. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>二维码下载</title> <script type="text/javascript"&g

解决ios下的微信打开的页面背景音乐无法自动播放

后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的.那有个坑就是 如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以最理想的情况是,监听的js放在head前面(放在css外链之前),确保最新执行,切记!切记!. ·另一个坑就是,本文的解决方案只适合一开始就播放的背景音乐.如果你是做那种

iOS背景音乐不自动播放

iOS 内置浏览器safari不允许自动播放音乐.我们需要通过WeixinJSBridgeReady()函数实现自动触发 document.addEventListener("WeixinJSBridgeReady", function () { $('audio').play(); }, false); 但是加了上面的代码后在平常开发中还是会偶发这个现象 解决办法:加载完后添加以下逻辑,重新播放一下 wx.ready(function () { $("audio"

【转】一种解决h5页面背景音乐不能自动播放的方案

原文:http://www.cnblogs.com/wmhuang/p/5452259.html ---------------------------------------------------------------------------------------------- 场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.D

一种解决h5页面背景音乐不能自动播放的方案

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&

解决h5页面背景音乐不能自动播放的方案

场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性 现象: 大部分IOS系统和少部分Android微信不支持自动播放 $解决方案:监听WeixinJSBridgeReady事件.DOMContentLoaded事件 微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady&

select设置text的值选中(兼容ios和Android)基于jquery

前一段时间改了一个bug,是因为select引起的.当时我没有仔细看,只是把bug改完了就完事了,今天来总结一下. 首先说option中我们通常会设置value的属性的,还有就是text值的,请参见下面的HTML代码: 1 <select class="sel" name=""> 2 <option value="1">one</option> 3 <option value="2"&