为视频写简单的功能

落日映苍穹つ 2022-05-25 11:07 169阅读 0赞

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

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

<!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" οnclick="PlayOrPause()">4</button>
    			<button class="next" οnclick="Next()">8</button>
    			<button class="back" οnclick="Prev()">7</button>
    			<button class="muted0" οnclick="Muted(this)">x</button>
    			<input id="vol" type="range" min="0" max="1" step="0.1" οnchange="Volume()">
    			<button class="pic" οnclick="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>

@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;
    	}
    }

效果图：

![70][]

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

[70]: /images/20220525/1f2936cf75d94feea166b7a0a96982d6.png