背景
最近做了一个需求,要再手机页面上播放背景音乐,看起来简单,其实不然。安卓可以自动播放但ios却不可以。
H5的出现对多媒体在网页上的视频播放提供很好的支持,以前网页播放视频基本依赖于flash等插件。而H5的video标签实现了网页播放视频无插件化。当前,绝大多数浏览器都支持H5的video标签,除了部分PC端浏览器比如IE还不支持。
Android上
在 video标签上添加autoplay属性即可
<video src="movie.ogg" controls="controls" autoplay="autoplay">
您的浏览器不支持 video 标签。
</video>
IOS 上
ios比较特殊,为了不吓着用户,ios是禁止自动播放的,也就是说autoplay是没有效果的,解决的办法就是自己手动触发播放时间一下。
但是直接手动触发又会存在一个时灵时不灵的尴尬现象,看了网上很多解决的办法,例如,手动给document添加事件,然后触发它,或者直接在js,ready方法区内触发video元素的play()事件,这些我都尝试过,都存在时灵时不灵的现象。
最为稳妥的就是在 微信JS-SDK 上去触发play()事件
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: 'gh_1a8c118653f8',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
$("#video")[0].play();
});
或者就是用户触碰屏幕时触发play()事件