标签:isp 视频流 style play 通过 reload str 背景 oop
苹果禁止了Autoplay和JS "onload" 加载播放,使在html文件里使用了preload和autoplay属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流。
除非用户物理点击一次屏幕,其实现在不能苹果手机,其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。
背景音不能自动播放的场景及解决办法
解决方案:监听WeixinJSBridgeReady事件、DOMContentLoaded事件
微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上,WeixinJSBridge并不是WebView一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件"WeixinJSBridgeReady"。
发现部分机型,监听DOMContentLoaded和load事件,在回调中也可以播放音乐;
所以,为了保险起见,可以同时监听两个事件,以增强其适用性。
<div class="musicinfo" id="musicinfo"> <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay" loop="loop">您的浏览器不支持 audio标签。</audio> <img class="music on roate" src="musicon.png"> </div> document.addEventListener(‘DOMContentLoaded‘, function () { function audioAutoPlay() { var audio = document.getElementById(‘ musicid ‘); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); });
2、部分Android浏览器和所有IOS下Safari浏览器不支持自动播放
解决方案:通过手势事件播放音乐
(1) 监听body的touchstart事件,回调中播放音乐;
缺点:第一次点击按钮元素可能不响应,部分元素的touch事件可能会阻止冒泡,需要在对应的地方调起播放音乐函数
var audio = document.getElementById(‘musicid‘);
function musicInBrowserHandler() {
audio.play();
document.body.removeEventListener(‘touchstart‘, musicInBrowserHandler);
}
document.body.addEventListener(‘touchstart‘, musicInBrowserHandler);
(2) 可以增加透明层,点击到透明层,播放音乐,关闭透明层;
缺点:第一次点击按钮元素可能不响应,而且有时候用户不会在打开页面短时间内点击,造成用户体验上的伤害。
解决方案:1.壳浏览器支持;2.通过手势事件播放音乐
缺点:有些壳浏览器可能没有音频自动播放的接口,或者用户不进行手势操作。
完整代码
<!-- 音乐 start--> <div class="musicinfo" id="musicinfo"> <audio id="musicid" src="music.mp3" preload="preload" autoplay="autoplay" loop="loop">您的浏览器不支持 audio标签。</audio> <img class="music on roate" src="musicon.png"> </div> <!-- 音乐 end--> <script type="text/javascript"> // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器或者APP自动播放问题 function musicInBrowserHandler() { musicPlay(true); document.body.removeEventListener(‘touchstart‘, musicInBrowserHandler); } document.body.addEventListener(‘touchstart‘, musicInBrowserHandler); // 自动播放音乐效果,解决微信自动播放问题 function musicInWeixinHandler() { musicPlay(true); document.addEventListener("WeixinJSBridgeReady", function () { musicPlay(true); }, false); document.removeEventListener(‘DOMContentLoaded‘, musicInWeixinHandler); } document.addEventListener(‘DOMContentLoaded‘, musicInWeixinHandler); } function musicPlay(isPlay) { var audio = document.getElementById(‘musicid‘); if (isPlay && audio.paused) { audio.play(); } if (!isPlay && !audio.paused) { audio.pause(); } } autoPlayMusic(); </script>
PS:上面的代码仅仅是解决背景音乐不自动播放的问题,如需加控制音乐播放和暂停的代码,请各位小伙伴先自行摸索一下;
标签:isp 视频流 style play 通过 reload str 背景 oop
原文地址:http://www.cnblogs.com/jinjinyike/p/6424170.html