没有进度条的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>自定义视频播放器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class='vContainer'>
<video id='myVideo'>
<source src="demo/imooc.mp4" type="video/mp4">
<source src="demo/imooc.ogv" type="video/ogv">
<source src="demo/imooc.webm" type="video/webm"> 您的浏览器不支持video标签
</video>
<div class='caption'>我自己的视频播放器</div>
<div class='control'>
<div class="top">
<div class="progress">
<span class="timebar"></span>
</div>
<div class="time">
<span id='currentTime'>00:00</span>
<span>/</span>
<span id=duration>00:00</span>
</div>
</div>
<div class='bottom'>
<div class="button play"></div>
<div class="button stop"></div>
<div class="button text">x1</div>
<div class="button text">x3</div>
<div class="Volume">
<span class="volumBar"></span>
</div>
<div class='buttom sound '></div>
</div>
<div class='loading'></div>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.vContainer{
width:640px;
height: 360px;
margin:30px auto;
position: relative;
overflow: hidden;
background-color: #dedede;
}
.caption{
position:absolute;
top:0px;
left:0px;
width:100%;
padding:10px;
font-size: 20px;
font-weight: bold;
color:#cccccc;
background-color:#1f1f1f;
z-index:1;
}
.control{
position:absolute;
bottom:0px;
left:0px;
width:100%;
color:#cccccc;
background-color:#1f1f1f;
z-index:1;
}
.control.top{
height:11px;
border-bottom: 1px solid #404040;
padding:1px 5px;
background-color:#1f1f1f;
}
.control.top.progress{
width:85%;
height:10px;
position:relative;
float: left;
cursor:pointer;
background-color:#404040;
border-radius: 5px
}
正在回答
你好，如下，这两个选择器都是带有父级的，需要留一个空格，不能紧挨着，紧挨着的话就是用一个元素，同时拥有这个几个类，显然这个没有这个元素。认真检查下代码哦。
祝学习愉快~
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星