<!DOCTYPE html>
<html>
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>建设招标网</title>
<script src="/Content/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{padding:0;margin:0}
body,html{height:100%;width:100%;}
body{overflow:hidden;}
#videobox{position:fixed;top:0;bottom:0;width:100%;height:100%;overflow:hidden;user-select: none;}
#show{width:100%;-webkit-user-select:none;user-select:none;-ms-user-select:none}
.page{width:100%;text-align:center;overflow:auto;color:#000;position:relative}
#video_model{position:absolute;top:0;right:0;left:0;z-index:2;}
#video_model video{width:100%;height:100%;background-color:#000}
.video_model_btn{position:absolute;display:block;height:100%;width:100%;top:0;z-index:10}
.video_model_btn:after{position:absolute;content:"";width:80px;height:80px;margin:-40px 0 0 -40px;background:rgba(0,0,0,.5) url(/images/videostart.png) no-repeat 50%;background-size:40px;border-radius:10px;top:50%;left:50%}
.videoBtnHide:after{display:none}
.vod_img{width:100%;height:100%;position:relative;background-color:#000}
.vod_img img{width:100%;height:100%;object-fit:contain;}
.vod_info{position:relative}
.vod_info_zhezhao{height:15rem;width:100%;position:absolute;bottom:0;background-image:-webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.6)));background-image:-webkit-linear-gradient(top,transparent,rgba(0,0,0,.6));background-image:linear-gradient(180deg,transparent,rgba(0,0,0,.6));z-index:5}
.vod_info_title{position:absolute;bottom:0;z-index:6;color:#fff;width:100%;}
.vod_info_title p{padding:2rem 1.4rem;text-align:left;}
.vod_cont{position:absolute;right:0;width:5rem;z-index:15;bottom:6rem;color:#fff;font-size:12px;text-align:center}
.vod_cont>div{margin-top:1rem}
.vod_cont img{width:2.6rem}
.vod_cont span{display:block}
.vod_cont_logo{border-radius:50px}
.vod_top{position:absolute;top:0;left:0;width:100%}
.vod_top_zhezhao{height:10rem;width:100%;position:absolute;top:0;z-index:5;background-image: -webkit-gradient(linear,left top,left bottom,from(0),color-stop(0,transparent),to(rgba(0,0,0,.32)));background-image: -webkit-linear-gradient(0,transparent,rgba(0,0,0,.32));background-image: linear-gradient(0,transparent,rgba(0,0,0,.32));}
.vod_close{position:absolute;color:#fff;z-index:20;top:14px;left:14px}
.vod_close img{width:1.6rem}
</style>
</head>
<body>
<div id="videobox">
<div class="vod_top">
<div class="vod_top_zhezhao"></div>
<div class="vod_close"><a href="/smallvideo/indexm.html"><img src="/images/vodback.png" /></a></div>
</div>
<div id="show">
<div id="video_model">
<video id="video" :webkit-playsinline="true" :x-webkit-airplay="true" playsinline="true" t7-video-player-type="inline" x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-playsinline loop></video>
</div>
<!--<div class="page">
<div class="vod_img">
<img src="" />
<i class="video_model_btn videoBtnHide"></i>
</div>
<div class="vod_info">
<div class="vod_info_zhezhao"></div>
<div class="vod_info_title">阿斯顿发发阿斯顿发发顺丰阿斯顿发发顺丰阿斯顿发发顺丰顺丰</div>
<div class="vod_cont">
<div>
<img src="videologo.jpg" class="vod_cont_logo"/>
</div>
<div>
<img src="svscan.png" />
<span>12311</span>
</div>
<div>
<img src="svzan.png" />
<span>12311</span>
</div>
</div>
</div>
</div>-->
</div>
</div>
</body>
</html>
<script type="text/javascript">
var rejson = [];
var direction = "";//手指滑动的方向
var pageHight = document.getElementById('videobox').clientHeight;
var viewport = document.getElementById('show');//获取页面的节点集合
var currentPosition = 0;//本次滑动前的初始位置
var obj_video = $("#video_model video");//video标签
$(function () {
$("#video_model").css("height", pageHight + "px");
getlist(<%=ViewData["page"] %>, '<%=ViewData["gid"] %>');
$(".video_model_btn").live("click", function () {
var obj_v = obj_video[0];
if (obj_v.paused) {
obj_v.play();
//点击播放把所有的播放按钮都隐藏，因为video设置了自动播放，滑动后本身就在播放
$(".video_model_btn").addClass("videoBtnHide");
} else {
obj_v.pause();
//暂停只针对当前视频显示播放按钮
$(this).removeClass("videoBtnHide");
}
});
});
function getlist(page,gid) {
$.post("/smallvideo/GetVodList.html", { page: page }, function (data) {
//遍历所有的JSON视频
for (var i = 0; i < data.length; i++) {
rejson.push(data[i]);
var item_page = '';
item_page += '<div class="page" data-v="vitem' + i + '">';
item_page += ' <div class="vod_img">';
item_page += ' <img src="' + data[i].V_Path_Img + '" />';
item_page += ' <i class="video_model_btn"></i>';
item_page += ' </div>';
item_page += ' <div class="vod_info">';
item_page += ' <div class="vod_info_zhezhao"></div>';
item_page += ' <div class="vod_info_title"><p>' + data[i].Title +'</p></div>';
item_page += ' <div class="vod_cont">';
item_page += ' <div><img src="/images/videologo.jpg" class="vod_cont_logo" /></div>';
item_page += ' <div><img src="/images/svscan.png" /><span>' + data[i].ScanNum +'</span></div>';
item_page += ' <div><img src="/images/svzan.png" /><span>' + data[i].ZanNum +'</span></div>';
item_page += ' </div>';
item_page += ' </div>';
item_page += '</div>';
$("#show").append(item_page);
if (gid != "" && gid == data[i].Gid) {
//使用动画过渡让页面滑动到最终的位置
var gid_y = pageHight * i;
currentPosition = 0 - gid_y;
viewport.style.transform = 'translate3d(0, -' + gid_y + 'px, 0)';
//把video标签也移动到当前位置
document.getElementById("video_model").style.top = gid_y + "px";
obj_video.attr("src", data[i].V_Path).attr("poster", data[i].V_Path_Img);
obj_video[0].play();
}
}
$(".page").css("height", pageHight + "px");
//获取到的
},"json");
}
/*手指放在屏幕上*/
document.addEventListener("touchstart", function (e) {
//e.preventDefault();
var touch = e.touches[0];
startY = touch.pageY;
viewport.style.webkitTransition = ""; //取消动画效果
startT = new Date().getTime(); //记录手指按下的开始时间
isMove = false; //是否产生滑动
}.bind(this), false);
/*手指在屏幕上滑动，页面跟随手指移动*/
document.addEventListener("touchmove", function (e) {
//e.preventDefault();
var touch = e.touches[0];
var deltaY = touch.pageY - startY;
//滑动了多长距离
moveLength = deltaY;
var translate = currentPosition + deltaY; //当前需要移动到的位置
if (deltaY != "0") {
//移动页面
viewport.style.transform = 'translate3d(0, ' + translate + 'px, 0)';
isMove = true;
}
direction = deltaY > 0 ? "down" : "top"; //判断手指滑动的方向
}.bind(this), false);
/*手指离开屏幕时，计算最终需要停留在哪一页*/
document.addEventListener("touchend", function (e) {
//e.preventDefault();
var maxHight = viewport.clientHeight;
var translate = 0;
//计算手指在屏幕上停留的时间
var deltaT = new Date().getTime() - startT;
if (isMove) { //发生了滑动
//如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都停留到下一页
//console.log(Math.abs(moveLength));
//console.log(pageHight);
//console.log(Math.abs(moveLength) / pageHight);
var isNextVideo = false;//是否滑到下一个视频
if (deltaT < 300 || Math.abs(moveLength) / pageHight >= 0.5) {
if (currentPosition >= 0) {
//此时为第一个视频，向下滑依然回到第一个视频位置
if (direction == 'down')
translate = 0;
else {
translate = currentPosition - pageHight;
isNextVideo = true;
}
}
else if (maxHight + currentPosition == pageHight) {
//此时为最后一个视频，向上滑依然是最后一个
if (direction == 'top')
translate = currentPosition;
else {
translate = 0 - (maxHight - pageHight * 2);
isNextVideo = true;
}
}
else {
isNextVideo = true;
if (direction == 'down')
translate = currentPosition + pageHight;
else
translate = currentPosition - pageHight;
}
} else {
translate = currentPosition;
}
//执行滑动，让页面完整的显示到屏幕上
currentPosition = translate;
//使用动画过渡让页面滑动到最终的位置
viewport.style.transition = "transform 0.4s ease 0s";
viewport.style.transform = 'translate3d(0, ' + translate + 'px, 0)';
//把video标签也移动到当前位置
document.getElementById("video_model").style.top = translate.toString().replace("-", "") + "px";
if (isNextVideo) {
//计算当前是第一个视频，起始值：0
var pageNow = Math.round(Math.abs(translate) / pageHight);
console.log(pageNow);
console.log(rejson);
obj_video.attr("src", rejson[pageNow].V_Path).attr("poster", rejson[pageNow].V_Path_Img);
obj_video[0].play();
//并且把该视频上的播放按钮隐藏
//console.log(obj_video[0].paused);
if (obj_video[0].paused)
$("div[data-v=vitem" + pageNow + "] .video_model_btn").removeClass("videoBtnHide");
else
$("div[data-v=vitem" + pageNow + "] .video_model_btn").addClass("videoBtnHide");
}
}
}.bind(this), false);
</script>
标签：100%,top,page,item,小视频,video,var,手机,抖音 From： https://www.cnblogs.com/lb809663396/p/16864228.html