移动端H5页面开发坑点指南

这个是苹果系统限制默认不允许自动播放音频/视频,需要点一下触发play()事件才能播放;那么我们可以在页面onload后触发播放事件:

document.getElementById('music').play(); 

到这里一般都可以播放音乐了,如果还不行很有可能是微信的限制

问题3:微信的限制

如果是微信的限制,这时需要调用微信接口,页面先引入:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 

然后JS写入微信事件:

document.addEventListener("WeixinJSBridgeReady", function() { 
    document.getElementById('music').play(); 
}, false); 

小结:

1. audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常
2. audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间

问题4:Safari浏览器自动播放

document.addEventListener('touchstart', function(){    
    audio.play(); 
}, false); 

ios系统不支持动画暂停样式(animation-play-state)

H5页面一般都会有BGM,也会提供一个旋转的音乐图标供用户开启关闭音乐;我们希望当用户点击音乐按钮时图标停止旋转,再点图标顺着之前停止的位置继续跑动画;animation-play-state是最简便的方式,然而ios不支持

目前的解决方案是:音乐图标负责跑动画,图标父级元素负责记录停止时的转动值

ios防止长按页面元素被选中

解决:加入样式可禁止用户进行复制,ios和一般的安卓都可以解决

-webkit-touch-callout:none;  //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口 
-webkit-user-select:none; //webkit浏览器   
-khtml-user-select:none; //早期浏览器  
-moz-user-select:none; //火狐  
-ms-user-select:none; //IE10  
user-select:none;  

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!