在ios和安卓手机里的微信环境下做网页播放视频时，会遇到很多问题，不自动播放啊，播放结束后会出现视频推荐广告，出现控制条等有很多坑 一下记录一下日常的解决方案 各位朋友有更好的方案也一定要告诉我

    <video id="videoW"
     src="demo.mp4"
     poster="demo.jpg" /视频封面/
     preload="auto" 
     /不黑底全屏播放设置开始/
     x5-playsinline="true" /腾讯内置的qq x5内核 小窗内播放/
     webkit-playsinline="true" /这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放/  
     playsinline="true"  /IOS微信浏览器支持小窗内播放/ 
     /不黑底全屏播放设置结束/
     
     /全屏播放设置开始 有特殊业务需要竖屏全屏播放视频/
     x5-video-player-type="h5"  /启用H5播放器,是wechat安卓版特性/
     x5-video-player-fullscreen="true" /全屏设置，设置为 true 是防止横屏/
     x5-video-orientation="portraint" /*播放器支付的方向，
                        landscape横屏，portraint竖屏，默认值为竖屏*/
     /全屏播放设置结束/
     style="object-fit:fill">
    </video>

做项目中遇到了一个问题，微信播放视频时总是会自动全屏播放视频，但有时候我们就是需要视频能够局部区域播放，而且安卓的微信会播放结束后自动推送推荐视频影响用户体验，对此我们可以通过调用h5原生video来解决。
微信H5视频小窗播放or全屏播放
HTML代码：

    <div id="videobox">
     <video id="videoALL" 
     src="mp4.mp4" 
      poster="1.jpg" 
      preload="auto" 
      webkit-playsinline="true" 
      playsinline="true" 
      x-webkit-airplay="allow" 
      x5-video-player-type="h5" 
      x5-video-player-fullscreen="true" 
      x5-video-orientation="portraint"
      style="object-fit:fill">
      </video> 
     <div id="btn" onclick="playcontr()"></div>
    </div>
    <div id="videoend">
      <div id="againbtn" onclick="playcontr()"></div>
    </div>

css

    *{padding: 0;margin: 0;}
    videobox{position: absolute;width: 100%;height: 100%;background-color: green;background-image: url(1.jpg);background-size: 100% 100%;background-position: top;overflow: hidden;}
    videoALL{
      height: auto;
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      object-fit: fill;
      display: block;
      background-size: cover;
      overflow: hidden;}
    btn,#againbtn{width: 81px;height: 75px;position: absolute;top: 50%;left:50%;margin-top: -37.5px;margin-left: -40.5px;background-image: url(btn.png);background-size: 100% 100%;}
    videoend{position: absolute;background-color: pink;display: none;background-image: url(2.jpg);background-size: cover;background-position: top;}

javascript

    var videoALL = document.getElementById('videoALL'),
        videobox = document.getElementById('videobox'),
        btn = document.getElementById('btn'),
        videoend =  document.getElementById('videoend');
    var clientWidth = document.documentElement.clientWidth;
    var clientHeight = document.documentElement.clientHeight;
    videoALL.style.width = clientWidth + 'px';
    videoALL.style.height = 'auto';
    document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
    
    function stylediv(divId){
        divId.style.width = clientWidth + 'px';
        divId.style.height = clientHeight +200+ 'px'; 
    }
    stylediv(videobox);
    stylediv(videoend);
    
    var u = navigator.userAgent; 
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 
    
    function playcontr(){
        if (isAndroid) {
           videoALL.style.width = window.screen.width + 'px';
           videoALL.style.height = window.screen.height + 'px'; 
        }
        videobox.style.display = "block";
        videoALL.play();
        btn.style.display = "none";
        videoend.style.display = "none";
    };
    
    videoALL.addEventListener('pause',function(){  
        videoALL.style.width = clientWidth + 'px';
        btn.style.display = "block";
    })  
    
    videoALL.addEventListener("ended",function(){
        videoALL.pause();
        videobox.style.display = "none";
        videoend.style.display = "block";
    });