为视频写简单的功能

如何用js/css来为一个视频写一些截屏，快进，快退，静音的简单的功能呢？

下面我来给大家安利一下代码：

	
	
	




	

		
		

		

			4
			8
			7
			x
			
			


		
		
	
	
	

@charset = "UTF-8";
#main{
	width: 800px;
	height: 600px;
	padding: relative;
}


button{
	outline: none;
}


/*/*播放键控制区**/
.bar{
	border: 1px solid;
	position: relative;
	width: 100%;
	height: 15%;
	background: #ccc;
	border-radius: 10px;
	opacity: 0;//隐藏


}
.bar:hover{
	opacity: 1;//鼠标放上去出现
}
#playorpause, .next, .back, .muted0, #vol, .pic{
	display: block;
	background: orange;
	border-radius: 48px;
	cursor: pointer;
	position: absolute;
	font-family:"Webdings";
	font-size: 48px;
	color: green;
}


#playorpause{
	bottom: 20%;
	left: 45%;
}
.next{
	bottom: 20%;
	left: 55%;
}
.back{
	bottom: 20%;
	left: 35%;
}


.muted0{
	width: 48px;
	height: 48px;
	font-size: 42px;
	bottom: 23%;
	right: 25%;
	color: green;


}
#vol{
	width:20%;
	bottom: 40%;
	right: 2%;
}


.pic{
	bottom: 10%;
	left: 20%;
	background: orange;
	width: 60px;
}
#progress{
	position: absolute;
	height: 15px;
	width: 10px;
	background: aqua;
	border-radius: 10px;
	animation: keframe 1s linear infinite;
	
	
}
#probar{
	background: rgba(10, 30, 10, 0.3);
	height: 15px;
}


@keyframes keframe{
	0%{
		background-position:  0 0;
	}
	100%{
		background-position: 60px 10px;
	}
}

效果图：

可能写的比较简陋，毕竟初学嘛，大家不要见笑，以后还会有更优质的代码分享给大家的，嘿嘿！