为视频写简单的功能

最新推荐文章于 2024-06-29 10:19:21 发布

原创最新推荐文章于 2024-06-29 10:19:21 发布 · 292 阅读

5 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用JavaScript和CSS实现视频的基本控制功能，包括播放/暂停、快进、快退、静音及截图等操作，并附带了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何用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" 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>

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

效果图：