一。视频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();
}
}
