video内容

最新推荐文章于 2021-11-24 09:55:45 发布

张悦是个好人

最新推荐文章于 2021-11-24 09:55:45 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/qq_45337854/article/details/105047856

版权

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>video作业</title>
		<style>
			body{
				text-align: center;
			}
			input{
				color: white;
				background-color: #0000FF;
				width: 90px;
				height: 40px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<video id="video" width="1200" src="video/movie.mp4" controls="controls" loop autoplay></video>
		<br>
		<input type="button" value="播放/暂停" onclick="playPause()" />
		<input type="button" value="快进5秒" onclick="quickly()" />
		<input type="button" value="快退5秒" onclick="back()" />
		<input type="button" value="音量+" onclick="jiada()" />
		<input type="button" value="音量-" onclick="jianxiao()" />
		<input type="button" value="静音" onclick="jingyin()" />
		<input type="button" value="缩小" onclick="makeSmall()" />
		<input type="button" value="还原" onclick="makeNormal()" />
		<input type="button" value="全屏" onclick="quanping()" />

	
<script>
	var video = document.querySelector('video');

	function playPause() {
		if (video.paused)
			video.play();
		else
			video.pause();
	}

	function quickly() {
		video.currentTime = video.currentTime + 5;
	}

	function back() {
		video.currentTime = video.currentTime - 5;
	}


	function jiada() {
		var a = video.volume + 0.2;
		if (a > 1) {
			video.volume = 1
		} else {
			video.volume = a;
		}
	}

	function jianxiao() {
		var a = video.volume - 0.2;
		if (a < 0) {
			video.volume = 0
		} else {
			video.volume = a;
		}
	}

	function jingyin() {
		if (video.muted) {
			video.muted = false;
		} else {
			video.muted = true;
		}
	}

	function makeNormal() {
		video.width = 1200;
	}

	function makeSmall() {
		video.width = 900;
	}

	function quanping() {
		video.webkitRequestFullscreen();
	}
</script>
</body>
</html>

张悦是个好人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
video内容

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>video作业</title> <style> body{ text-align: center; } input{ color...
复制链接

扫一扫

video内容

“相关推荐”对你有帮助么？