依然是主移动端,rem布局,先列出大概结构,方便写css代码,如下:
<body>
<div class="videoList">
<div class="videoList">
<div class="videoItem">
<div class="videoTop">
<div class="img" style="background-image: url('http://wimg.spriteapp.cn/picture/2020/0903/84bbafce-ed8f-11ea-8969-1866daeb0df0_wpd.jpg');"></div>
<button></button>
<h3 class="title">追银行小姐姐全过程,看人家是怎么追女孩的</h3>
<p>
<span class="icon"></span>
<span class="num">10</span>播放
</p>
</div>
<div class="videoBottom">
<img src="http://wimg.spriteapp.cn/profile/20180809175405412650.jpg" class="headerImg">
<div class="right">
<div class="author">百思爆笑</div>
</div>
</div>
</div>
</div>
<div class="downLoad">刷新内容</div>
<div class="playPage">
<video controls='controls' src="http://uvideo.spriteapp.cn/video/2020/0903/84bbafce-ed8f-11ea-8969-1866daeb0df0_wpd.mp4"></video>
<div class="close"></div>
</div>
</body>
videoList这个div存放每一个视频,playPage这个div用于接收点击的视频的src并占全屏幕播放,css代码如下:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.videoList {
width: 3.75rem;
/* height: 100vh; */
}
.videoItem {
/* vw:相对于视口的宽度,视口被均分为100单位的vw */
width: 100vw;
height: 75vw;
margin-bottom: 0.5rem;
}
.videoItem .videoTop {
width: 100vw;
height: 75vw;
position: relative;
}
.videoItem .videoTop .img {
width: 100vw;
height: 75vw;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
background-color: black;
}
.videoItem .videoTop button {
width: 100vw;
height: 75vw;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.4);
background-image: url('../img/play.png');
background-repeat: no-repeat;
background-position: center;
background-size: 20%;
}
.videoItem .videoTop h3 {
position: absolute;
left: 0;
top: 0;
width: 100vw;
font-size: 0.19rem;
padding: 0.2rem;
color: white;
}
.videoItem .videoTop p {
position: absolute;
width: 100vw;
height: 0.3rem;
display: flex;
align-items: center;
justify-content: flex-end;
left: 0;
bottom: 0;
text-align: right;
font-size: 0.19rem;
color: white;
padding: 0 0.1rem;
}
.videoItem .videoTop p .icon {
width: 0.3rem;
height: 0.2rem;
display: inline-block;
background: url('../img/eye.png') 100% no-repeat;
background-position: center;
}
.videoItem .videoBottom {
display: flex;
width: 100vw;
height: 0.5rem;
align-items: center;
background-color: antiquewhite;
}
.videoItem .videoBottom img {
width: 0.3rem;
height: 0.3rem;
border-radius: 0.15rem;
}
.videoItem .videoBottom .right {
height: 0.5rem;
flex: 1;
padding: 0.1rem;
display: flex;
align-items: center;
}
.playPage {
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
position: fixed;
left: 0;
top: 0;
}
.playPage video {
width: 100vw;
}
.close {
width: 0.2rem;
height: 0.2rem;
position: absolute;
right: 0.2rem;
top: 0.2rem;
background: url('../img/close.png') 60% no-repeat;
background-position: center;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 0.1rem;
}
.downLoad {
width: 100vw;
height: 0.35rem;
font-size: 0.2rem;
text-align: center;
line-height: 0.35rem;
background-color: #efefef;
color: #999;
}
接下来是比较复杂的js,总的来说大体上分为这几步:
- 加载数据。
- 通过获取到的数据渲染出视频列表。
- 每个视频的播放按钮绑定事件,实现播放。
- 播放与暂停内容、关闭。
- 刷新,并将界面滚回头部。
加载数据: 通过ajax发出请求,事先定义一个空数组,存放所有请求回来的短视频。
通过获取到的数据渲染出视频列表: 封装一个函数,循环短视频列表数组生成div追加进去,再在ajax函数中调用。
绑定事件,实现播放: 利用事件冒泡,冒泡到最外层div,通过自定义data-index获取到点击的是第几个视频,将其src属性赋给video。
播放与暂停内容、关闭: 调用video的对应方法,设置display属性即可。
刷新,并将界面滚回头部: 点击刷新时,重新发送一次ajax请求,请求下一页信息,清空原内容,重新渲染,调用scrollTo方法滚动到头部。
代码如下:
<script>
var httpUrl = 'https://api.apiopen.top/getJoke?page=1&count=10&type=video';
var html = document.querySelector('html');
var videoListDom = document.querySelector('.videoList');
var videoList = []; //存放所有视频列表
var playPageDom = document.querySelector('.playPage');
var videoDom = document.querySelector('.playPage video');
var closeDom = document.querySelector('.playPage .close');
var downLoadDom = document.querySelector('.downLoad');
var pageNum = 1; //控制页数
function setRem() {
var screenWidth = window.innerWidth; //获取屏幕宽
var rem1 = screenWidth / 3.75; //屏幕的宽度/设计稿占满全屏幕所需的rem数量,就可以得到1rem为多少像素。
html.style.fontSize = rem1 + 'px';
};
setRem();
window.onresize = function() {
setRem();
};
//1.加载数据
getAjax1(httpUrl, function(xhr) {
var resultObj = JSON.parse(xhr.response);
videoList = resultObj.result;
renderVideoList(videoList);
});
//2.通过获取到的数据渲染出视频列表
function renderVideoList(videoList) {
videoList.forEach(function(item, index) {
var videoItem = document.createElement('div');
videoItem.className = 'videoItem';
videoItem.innerHTML = `
<div class="videoTop">
<div class="img" style="background-image: url(${item.thumbnail});"></div>
<button type='button' data-index='${index}'></button>
<h3 class="title">${item.text}</h3>
<p>
<span class="icon"></span>
<span class="num">${item.up}</span>播放
</p>
</div>
<div class="videoBottom">
<img src=${item.header} class="headerImg">
<div class="right">
<div class="author">${item.name}</div>
</div>
</div>
`;
videoListDom.appendChild(videoItem);
});
}
//3.每个视频的播放按钮绑定事件,实现播放
videoListDom.addEventListener('click', function(e) {
//只有当点击的是按钮的时候,才会继续
if (e.target.tagName == 'BUTTON') {
var index = e.target.dataset.index;
var item = videoList[index];
//播放视频
playPageDom.style.display = 'block';
videoDom.src = item.video;
videoDom.play();
}
});
//4.关闭视频页
closeDom.addEventListener('click', function() {
playPageDom.style.display = 'none';
videoDom.pause();
});
//5.刷新
downLoadDom.addEventListener('click', function() {
pageNum++;
var httpUrl = `https://api.apiopen.top/getJoke?page=${pageNum}&count=10&type=video`;
getAjax1(httpUrl, function(xhr) {
var resultObj = JSON.parse(xhr.response);
videoList = resultObj.result;
videoListDom.innerHTML = '';
renderVideoList(videoList);
scrollTo(0, 0); //滚动到头部
});
});
</script>