如何用js/css来为一个视频写一些截屏，快进，快退，静音的简单的功能呢？
下面我来给大家安利一下代码：
H5/js代码：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>vedio</title>
<link rel="stylesheet" href="css/vedio.css">
</head>
<body>
<div id="main">
<video id="video" src="mp4/OneRepublic - Counting Stars.mp4"
controls="controls" width="800"></video>
<div class="bar">
<div id="probar" style="width: 800px;"><div id="progress"></div></div>
<button id="playorpause" onclick="PlayOrPause()">4</button>
<button class="next" onclick="Next()">8</button>
<button class="back" onclick="Prev()">7</button>
<button class="muted0" onclick="Muted(this)">x</button>
<input id="vol" type="range" min="0" max="1" step="0.1" onchange="Volume()">
<button class="pic" onclick="CatchPicture()"><img src="images/截图.jpg" width="85%"></button>
</div>
<canvas id="canvas" width="300" height="200"></canvas>
</div>
<script type="text/javascript">
var video = document.getElementById('video');
//播放暂停
function PlayOrPause(e) {
if (video.paused) {
video.play();
event.target.innerHTML=';'
event.target.style.color='red'
}
else{
video.pause();
event.target.innerHTML='4'
event.target.style.color='green'
}
}
//前进和后退
function Next(){
video.currentTime += 60;
}
function Prev(){
video.currentTime -= 60;
}
//设置静音
function Muted(){
if (video.muted) {
video.muted = false
event.target.innerHTML='X'
event.target.style.background='orange'
document.getElementById('vol').value = video.volume
}
else{
video.muted = true;
event.target.innerHTML = 'x'
event.target.style.background = 'white'
document.getElementById('vol').value = 0
}
}
//设置声音
function Volume(){
video.volume = event.target.value;
}
//进度条
function Progress(){
var progress = document.getElementById("progress");
progress.style.width = (video.currentTime/video.duration)*100+'%'
}
window.onload = function(){
var progress = document.getElementById("progress");
var probar = document.getElementById("probar");
probar.addEventListener('click', progress_click)
video.addEventListener('timeupdate', Progress)
}
function progress_click(){
var progress = document.getElementById("progress");
var w = parseInt(document.getElementById("probar").style.width);
// alert(event.offsetX)
if (event.offsetX) {
video.currentTime = video.duration*(event.offsetX/w);
}
}
function CatchPicture(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
css代码：
@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;
}
}
效果图：
可能写的比较简陋，毕竟初学嘛，大家不要见笑，以后还会有更优质的代码分享给大家的，嘿嘿！