我是阿酷tony，从事视频直播行业近十年，方向：视频直播、微信直播、视频加密技术、流媒体环境、网页视频播放器，组建了一个交流群，点击加入一起交流。

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