video 在微信中，安卓全屏和ios上如何内联播放？H5同层播放器相关接入规范

今天在做一个分享页面的时候需要播放视屏用了video，然后各种坑开始了：

　　<video src="http://xxx.mp4 " id="myVideo" poster=“XXX”  controls></video>

在安卓微信 内：播放全屏并且定位在视屏上的一些东西也不见了？于是接入了同层

　　<video src="http://xxx.mp4 " id="myVideo" poster=“XXX” controls x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

　　注：  x5-video-player-type、x5-video-player-fullscreen属性需要在播放前设置好，播放之后设置无效

　　此时视屏上的一些东西看见了，但是$(window).width()；$(window).height()设置后不能铺满整平，同层播放的时候呢出现上下黑边，

　　折腾了一番用了screen.width ； screen.height

　　此时进入同层的时候能够全屏播放了，但是呢页面刚进入未播放时候出现了滚动条，而我想要的就是占满手机屏幕就行了。反复测试了下在安卓内：

　　　　$(window).height() ： 获取的高度是内容区域不加导航区域，而 screen.height 是整个手机区域

　　还有安卓进入同层上面有个返回按钮，点击后视屏停止播放难看，于是改变了下形式不要默认播放按钮，不要默认poster加封面；自己写了个播放按钮

　　　　<video src="http://xxx.mp4 " id="myVideo" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

　　通过监听处理：

　　　　myVideo.addEventListener('play',function(){}）

　　　　myVideo.addEventListener('pause',function(){}）

　　此时坑已经差不多了，但是 ios 内坑继续了

　　　　ios内联播放需要加上：<video src="http://xxx.mp4 " id="myVideo" webkit-playsinline="true" x-webkit-airplay="true"  playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" ></video>

　　兼容各种全屏状态　　　

　　var ua = navigator.userAgent.toLowerCase();
　　if (/iphone|ipad|ipod/.test(ua)) {
　　　　$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
　　}else if (/android/.test(ua)) {
　　　　if (ua.match(/MicroMessenger/i) == "micromessenger") {

　　　　　　//微信  解决同层时候上下黑边

　　　　　　test_video.style.width = screen.width + "px";
　　　　　　test_video.style.height = screen.height + "px";
　　　　}else{

　　　　　　//QQ微博等
　　　　　　$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
　　　　}
　　}else{
　　　　$("#test_video").css({ "width":$(window).width(),"height":$(window).height()})
　　}

　　还有通过object-position 设置显示位置、视屏是否铺满容器

　　　　myVideo.style["object-position"]= "0px 0px"  //顶部

　　　　var offsetY = myVideo.clientHeight - (myVideo.clientWidth * myVideo.videoHeight / myVideo.videoWidth)

　　　　myVideo.style["object-position"]= "0px " + offsetY + "px"  //底部

　　　　myVideo.style["object-fit"]= "fill"  //视屏铺满容器

　　

　　通过上面，通过特定布局在同层内还是可以实现假象的内联播放的，上面视屏，下面区域加上滚动条来处理