最近的一次业务需求中,偶然接到了这么一个需求:“用户首屏可以自动播放一段视频,希望点击再全屏”。
具体的踩坑记录,这里就不做过多的叙述了,大家可以自行脑补,重点是问题&解决方案。
Chrome
浏览器介绍详见:chrome
浏览器视频播放限制
总结几点:
chrome 66 PR
禁止自动播放有声音的媒体 (:看评论,被喷的很厉害Android
微信内核官方通告地址:Android
微信内网页音频自动播放能力调整
IOS
点击播放会自动全屏沉浸式体验貌似是苹果特意设计的,详见:Apple Design
大前提:所有的自动播放,视频必须静音,也就是 muted
为 true
。
1.安卓微信视频不能自动播放。
这个基本无解,但是咱们可以补偿播放。
window.addEventListener('touchstart', () => {
video.play();
});
简单原理就是:监听用户的触摸屏幕事件,去做补偿播放。
2.
IOS
微信无法自动播放。
IOS
虽然没有微信安卓的限制,但是播放还是稍微需要点技巧:
document.addEventListener("WeixinJSBridgeReady", function () {
video.play();
} , false);
3.
IOS
微信有时黑屏1-2s
touchstart
事件补偿播放4.
IOS
点击播放会自动全屏
playsinline
& webkit-playsinline
为 true
IOS10
以前的设备需要引入 iphone-inline 作兼容兜底。(如果目标用户设备较少可酌情去除)5.诸如小米手机自带的浏览器会自动劫持
video
标签,即便是隐藏控制栏也没用。
目的是为了去注入广告....( (: 暂无解决办法,还在寻找中 )
6.安卓手机视频同层播放
两个 Demo无法在公众号预览,强烈推荐阅读原文跳转博客主页浏览。