麻烦老师看看，这是一个视频列表，电脑上手机模式上测试和手机端上直接测试，效果不一样
<!DOCTYPE html>
<html>
<head>
<title>商学院</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.container{
height: 100%;
background: #f0f0f0;
}
ul li{
list-style: none;
}
a,input,button,textarea{
outline: 0;
text-decoration: none;
}
em,i,samp{
font-style: normal;
font-family: PingFang-SC-Medium;
}
h4,h5,h6{
font-weight: normal;
}
body{
font-family: PingFang-SC-Medium;
font-size: 0.24rem;
color: #192469;
background: #fff;
}
.hide{
display: none !important;
}
/*头部*/
.head{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.2rem;
height: 1.3rem;
position: fixed;
top: 0;
left: 0;
z-index: 33;
}
.head .title{
font-size: 0.6rem;
color: #111;
padding-left: 0.2rem;
width: 2.24rem;
}
.search{
position: relative;
}
.search img{
position: absolute;
top: 0.1rem;
left: 0.34rem;
width: 0.29rem;
height: 0.27rem;
}
.search input{
width: 2.55rem;
height: 0.48rem;
background-color: #ffffff;
box-shadow: 0px 0px 0.7px 1px #efefef;
border-radius: 0.21rem;
border: none;
padding-left: 1rem;
}
.search input::-webkit-input-placeholder{
padding-left: 0.14rem;
font-size: 0.24rem;
color: #838383;
}
.shop-car img{
width: 0.62rem;
height: 0.62rem;
}
.menu img{
width: 0.33rem;
height: 0.32rem;
}
.content{
margin-top: 0.8rem;
}
/*底部*/
footer{
position: fixed;
bottom: 0;
left: 0;
background: #fff;
z-index: 33;
height: 0.98rem;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: -6px 0px 4px 0px rgba(135, 135, 135, 0.22);
padding: 0 0.56rem;
width: calc(100% - 1.12rem);
}
footer a{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
footer a span{
font-size: 0.2rem;
line-height: 0.2rem;
color: #6c6c6c;
margin-top: 0.1rem;
}
footer .active span{
color: #d81e06;
}
footer a i{
width: 0.42rem;
height: 0.4rem;
background-position: center;
background-repeat: no-repeat;
}
footer a .icon-index{
background-size: 0.42rem 0.37rem;
}
footer a .icon-classify{
background-size: 0.33rem 0.37rem;
}
footer a .icon-book{
background-size: 0.42rem 0.40rem;
}
footer a .icon-discover{
background-size: 0.34rem 0.37rem;
}
footer a .icon-mine{
background-size: 0.33rem 0.39rem;
}
.head-title{
height: 0.8rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 4px;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 33;
}
.head-title h4{
font-size: 0.36rem;
color: #1a1a1a;
}
.head-title img{
width: 0.25rem;
height: 0.43rem;
position: absolute;
top: 0.2rem;
left: 0.25rem;
}
.head_red{
height: 0.87rem;
background-image: linear-gradient(156deg,
#ff9fbc 0%,
#ff739b 0%,
#fe467a 0%,
#e3241a 100%),
linear-gradient(
#e52826,
#e52826);
}
.head_red h4{
color: #fff;
}
.nav{
margin-bottom: 0.06rem;
}
.nav ul{
height: 0.87rem;
padding: 0 0.33rem;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.nav ul li{
height: 0.87rem;
line-height: 0.87rem;
position: relative;
}
.nav ul li a{
font-size: 0.3rem;
color: #3a3a3a;
}
.nav ul .active a{
color: #f12825;
}
.nav ul .active i{
display: block;
width: 0.5rem;
height: 0.07rem;
background-color: #e8374a;
border-radius: 3px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -0.25rem;
}
/*白色标题*/
.head-title-white h4{
color: #fff;
}
/*遮罩*/
.mask{
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
position: fixed;
top: 0;
left: 0;
z-index: 8;
}
.container{
margin-bottom: 1rem;
}
.head{
position: fixed;
top: 0;
z-index: 3;
background: #fff;
width: calc(100% - 0.4rem);
}
.nav{
position: fixed;
top: 1.3rem;
z-index: 3;
width: 100%;
}
.nav ul{
height: 0.7rem;
background-color: #ffffff;
box-shadow: 0px 0px 7px 1px #f2f1f0;
/*border-radius: 0.2rem;*/
font-size: 0.28rem;
color: #8b8b8b;
margin-bottom: 0.4rem;
}
.nav ul .active{
color: #d81e06;
}
/*视频列表*/
.list{margin-top: 2.4rem;
padding: 0 0.17rem;
}
.list .item{
width: 100%;
margin-bottom: 0.4rem;
}
.video{
width: 100%;
height: 3.87rem;
border-radius: 0.2rem;
overflow: hidden;
position: relative;
}
.video video{
width: 100%;
height: 100%;
}
.video .mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
z-index: 0;
}
.video h4{
position: absolute;
top: 0.27rem;
left: 0.15rem;
color: #fff;
font-size: 0.4rem;
line-height: 0.4rem;
}
.video .play{
position: absolute;
top: 1.33rem;
left: 3.07rem;
width: 1.04rem;
height: 1.04rem;
}
.video .play img{
width: 100%;
height: 100%;
}
.video .line{
position: absolute;
bottom: 0.35rem;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
font-size: 0.24rem;
}
.video .line p{
padding: 0 0.25rem 0 0.16rem;
}
.item .work{
width: 100%;
height: 0.85rem;
text-align: right;
}
.item .work div{
padding: 0 0.25rem;
display: inline-block;
height: 100%;
line-height: 0.85rem;
}
.item .work .message img{
width: 0.42rem;
height: 0.41rem;
vertical-align: middle;
}
.item .work .more img{
width: 0.35rem;
height: 0.09rem;
vertical-align: middle;
}
/*底部*/
footer a .icon-index{
background-image: url('../img/icon/home.png');
}
footer a .icon-classify{
background-image: url('../img/icon/classify.png');
}
footer a .icon-book{
background-image: url('../img/icon/book-red.png');
}
footer a .icon-discover{
background-image: url('../img/icon/discover.png');
}
footer a .icon-mine{
background-image: url('../img/icon/mine.png');
}
</style>
</head>
<body>
<div class="container">
<!-- 搜索 -->
<div class="head">
<div class="title">
<h4>商学院</h4>
</div>
<div class="search">
<input type="text" name="" placeholder="输入搜索商品">
<img src="img/icon/search.png">
</div>
<div class="shop-car">
<img src="img/icon/shop-car.png">
</div>
</div>
<div class="nav">
<ul>
<li class="active">产品系列</li>
<li>业务范围</li>
<li>大咖分享</li>
<li>明星风采</li>
</ul>
</div>
<!-- 视频列表 -->
<div class="list">
<div class="item">
<div class="video">
<video class="video" poster="img/goods/goods.png" />
<source src="video/dengnixiake.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
<h4>德国为何会出局</h4>
<div class="play">
<img src="img/icon/play.png">
</div>
<div class="line">
<p><span>1312</span>次播放</p>
<p class="time"></p>
</div>
</div>
<div class="work hide">
<div class="message">
<img src="img/icon/message.png">
</div>
<div class="more">
<img src="img/icon/more.png">
</div>
</div>
</div>
<div class="item">
<div class="video">
<video class="video" poster="img/goods/goods.png" />
<source src="video/dengnixiake.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
<h4>德国为何会出局</h4>
<div class="play">
<img src="img/icon/play.png">
</div>
<div class="line">
<p><span>1312</span>次播放</p>
<p class="time"></p>
</div>
</div>
<div class="work hide">
<div class="message">
<img src="img/icon/message.png">
</div>
<div class="more">
<img src="img/icon/more.png">
</div>
</div>
</div>
<div class="item">
<div class="video">
<video class="video" poster="img/goods/goods.png" />
<source src="video/dengnixiake.mp4" type="video/mp4" />
</video>
<div class="mask"></div>
<h4>德国为何会出局</h4>
<div class="play">
<img src="img/icon/play.png">
</div>
<div class="line">
<p><span>1312</span>次播放</p>
<p class="time"></p>
</div>
</div>
<div class="work hide">
<div class="message">
<img src="img/icon/message.png">
</div>
<div class="more">
<img src="img/icon/more.png">
</div>
</div>
</div>
</div>
<!-- 底部 -->
<footer>
<a href="index.html">
<i class="icon-index"></i>
<span>首页</span>
</a>
<a href="classify.html">
<i class="icon-classify"></i>
<span>分类</span>
</a>
<a class="active" href="business.html">
<i class="icon-book"></i>
<span>商学院</span>
</a>
<a>
<i class="icon-discover"></i>
<span>发现</span>
</a>
<a href="mine.html">
<i class="icon-mine"></i>
<span>我的</span>
</a>
</footer>
</div>
</body>
<script type="text/javascript">
$('.nav li').click(function(){
$('.nav li').removeClass('active')
$(this).addClass('active')
})
var v = document.getElementsByClassName('video')
// for (var i = 0; i < v.length; i++) {
// console.log(v[i].duration)
// }
for (var i = 0; i < v.length; i++) {
v[i].onloadedmetadata = function(){
$('video').each(function(){
var seconds = $(this).get(0).duration
$('.line .time').html(totalTime(seconds))
})
// var seconds = v.duration
}
}
var totalTime = function(seconds){
var minite = Math.floor(seconds / 60)
if (minite<10) {
minite = "0" + minite
}
var second = Math.floor(seconds % 60 )
if (second<10) {
second = "0" + second
}
return minite+":"+second
}
var play = function(is){
$(is).siblings('h4').addClass('hide')
$(is).siblings('.mask').addClass('hide')
$(is).siblings('.line').addClass('hide')
$(is).addClass('hide')
$(is).siblings('video').trigger('play')
}
$('.play').each(function(index){
$(this).click(function(){
play(this)
var _video = $(this).siblings('video').get(0)
console.log(_video)
var self = this
$(self).siblings('video').click(function(){
if (_video.paused === false) {
_video.pause()
$(self).removeClass('hide')
$(self).siblings('h4').removeClass('hide')
$(self).siblings('.mask').removeClass('hide')
$(self).siblings('.line').removeClass('hide')
}
})
})
})
</script>
</html>
老师能帮忙看看吗
0
收起
正在回答 回答被采纳积分+1
2回答
相似问题
登录后可查看更多问答，登录/注册
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星