H5页面原生video标签移动端禁止全屏播放

制作移动端H5，需要添加视频，点击播放的时候会自动全屏播放，记录一下处理局部播放的问题。
标签写法：

<video id="pageVideo"
               x5-playsinline="true"             //安卓需要设置的属性
               playsinline="true"                  //ios需要设置的属性
               webkit-playsinline="true"       //ios10需要设置的属性
               preload="auto"                      //预加载
               loop
               poster="images/shipin.jpg">  //预设未播放封面
            <source src="mp4/shipin.mp4" type="video/mp4">
  </video>

解决播放前视频无封面黑屏问题
需要设置video宽度为1px，然后在视屏的div上放上遮罩
<div class="mask"><img src="1.jpg"></div>
点击遮罩时让其隐藏，同时给video加上css属性

<script>
    var video = $("#pageVideo");
    $("video").on('click',function(e){
        $(".mask").fadeOut()
        $("#videoBox video").css("width","100%")
        video[0].play()
    });
    $(".mask").on('click',function(e){
        $(this).fadeOut()
        $("#videoBox video").css("width","100%")
        video[0].play();
    });
</script>

tips:安卓系统video界面控件无法取消，宽度无法充满div的问题还没解决。