制作移动端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的问题还没解决。