分享一个很有趣的插件,起因是在做一个H5 campaign的时候需要做到
1.IOS在页面里不弹出自带Quicktime播放视频。
2.Android不全屏播放视频。
3.以上Base在微信浏览器。
然后上主角:iphone-inline-video
用法:
head里包入这个js
然后就一句话。
var video = $('video').get(0); enableInlineVideo(video);
可以用各种手机看看这个demo
然后你会发现,没错,各种浏览器,各个版本的OS,都可以内联播放!!!
另外提一下,这个插件的另一个玩意儿,也就是demo中的第二个视频,原理是将Video的所有祯读出来放入canvas一帧一帧无声自动播(它想绕过用户点击屏幕来静音播放视频),他所谓的canvas其实是THREEJS,测试了一下,ios10 safari下,微信浏览器里都不行,另外尝试了一下同理将Video用createJS和PIXI放,也都失败,外国网站的某些解答说是ios10修改了Video的读取权限,不过感觉不像,当然PC各种正常。
最后说一下微信,最近微信更新了IOS浏览器的内核!新的内核叫做WKWebview(之前叫做UIWebview),和safari行为高度一致(新坑开始)。
识别方法是你下拉一个网页如果显示“网页由...提供”说明是UIWebview,如果显示“此网页由...”则是WKWebview。
如果要让这个两个内核都Video内联,一定要严格按照这个代码写Video标签。
Android方面,微信里一定不要有任何的x5的标签,试了都会有问题,不过假如你刚好需要,拿去。
自动播放的问题,有空再说吧。