H5页面原生video禁止全屏播放

1. 制作移动端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>

2. 解决播放前视频无封面黑屏问题
   需要设置video宽度为1px，然后在视屏的div上放上遮罩

<div class="mask"><img src="1.jpg"></div>

3. 点击遮罩时让其隐藏，同时给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>