设置video适配所有的屏幕大小，滚动事件添加动画的实例讲解
一。视频video容器的大小，随着屏幕大小的变化，完美的显示效果。
1.css
.videobox{
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
display: none;
background: rgba(0,0,0,.8);
z-index: 30;
}
.videocontrol{
/*width: 80%;*/
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 10;
}
.deleteicon{
position: absolute;
top: 0;
right: 0;
width: 32px;
height: 32px;
z-index: 10;
transition: all 1s;
}
.deleteicon:hover{
transform: rotate(360deg);
}
2.html
<p class="videobox">
<p class="videocontrol">
<video class="videocontrol"
src="https://consumer.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/pdp/phones/maters/pd_90_v12_911_2.mp4"
controls="controls"></video>
<img class="deleteicon" src="./common/images/x3_pro/deleteicon.png" alt="图片">
</p>
</p>
3.javascript
var w = document.documentelement.clientwidth || document.body.clientwidth,
h = document.documentelement.clientheight || document.body.clientheight,
$videocontrol = $('.videocontrol');
var videow = (h * 0.9 * 16 / 9).tofixed(2),
videoh = (w * 0.9 * 9 / 16).tofixed(2);
if (w - videow > 0 && h-videoh >0) {
$videocontrol.width(videow);
$videocontrol.height((videow * 9 / 16).tofixed(2));
} else if (w - videow > 0 && h - videoh < 0) {
$videocontrol.width(videow);
$videocontrol.height((videow * 9 / 16).tofixed(2));
}else if(w - videow < 0 && h - videoh > 0){
$videocontrol.height(videoh);
$videocontrol.width((videoh * 16 / 9).tofixed(2));
}
二.监听页面滚动事件，实现动画效果。
$(window).scroll(function () {
b = $(this).scrolltop();
$(".ddpai_ctn").each(function () {
c = $(this).offset().top;
if (a + b > c + h / 2) {
$(this).addclass("move");
}
else {
$(this).removeclass("move");
}
});
});
$(".ddpai_shop_13 .playicon").on("click", function () {
$(".videobox").addclass('db');
});
$(".videobox .deleteicon").on("click", function () {
$(".videobox").removeclass('db');
playpause();
});
}
function playpause() { //暂停或者播放
var myvideo = document.getelementsbytagname('video')[0];
if (myvideo.paused) {
myvideo.play();
}
else {
myvideo.pause();
}
}