video适配与兼容

最近在做web端使用pano显示场景,pano是通过pano2vr来实现的,但是video作为热点插入页面总是会在部分浏览器中显示出黑屏,视频跳出,就猜测是video元素在移动端自动全屏导致,然后查阅了很多东西,把不同地方的东西聚集在一起,勉强实现了功能上的显示(小米自带浏览器真的是不提也罢);

首先要清除video的自动全屏:对于uc,微信,以及华为的部分机型有效,对于iOS浏览器,特别是微信端支持的程度简直超乎想象,可怕的很;

需要设置一些属性,大致为:

<video playsinlin webkit-playsinline poster="" preload="auto" x5-playsinline=true  x5-video-player-type="h5" x5-video-player-fullscreen=true>

这里属性里:

playsinlin webkit-playsinline 是用来实现video的内联显示

x5-playsinline , x5-video-player-type,x5-video-player-fullscreen:则是为了微信浏览器x5内核内联显示所需要的属性,这里的微信浏览器是用一个同层播放器的视频播放器来实现内联播放,但是需要tbs内核大于036849;进入和退出全屏播放都可以做相应的回调:x5videoexitfullscreen x5videoenterfullscreen

同时要处理video的双下巴大黑边,还可以使用:object-fit:fill,来进行消除;

另:江湖传说可以使用video.play(),控制视频的自动播放,我并没有实现,也可能是我用的有问题吧,有待继续解决;