制作移動(dòng)端H5氓栈,需要添加視頻不同,點(diǎn)擊播放的時(shí)候會(huì)自動(dòng)全屏播放脓魏,記錄一下處理局部播放的問題创夜。
標(biāo)簽寫法:
<video id="pageVideo"
x5-playsinline="true" //安卓需要設(shè)置的屬性
playsinline="true" //ios需要設(shè)置的屬性
webkit-playsinline="true" //ios10需要設(shè)置的屬性
preload="auto" //預(yù)加載
loop
poster="images/shipin.jpg"> //預(yù)設(shè)未播放封面
<source src="mp4/shipin.mp4" type="video/mp4">
</video>
解決播放前視頻無封面黑屏問題
需要設(shè)置video寬度為1px杭跪,然后在視屏的div上放上遮罩
<div class="mask"><img src="1.jpg"></div>
點(diǎn)擊遮罩時(shí)讓其隱藏,同時(shí)給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:安卓系統(tǒng)video界面控件無法取消驰吓,寬度無法充滿div的問題還沒解決揍魂。