实验 视频播放器

效果图:
实验 视频播放器_第1张图片

代码:


<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>八重樱_桃源恋歌title>
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		.box {
			position: relative;
			margin: 10px auto;
			width: 1000px;
			height: 562px;
			display: flex;
			flex-direction: column-reverse;
			overflow: hidden;
			user-select: none;
			/* 文字不可选中 */
		}

		video:hover,
		i:hover,
		progress:hover,
		.huakuai1:hover,
		.huakuai2:hover {
			cursor: pointer;
		}

		.module_bottom {
			width: 100%;
			height: 10%;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			position: absolute;
			justify-content: space-around;
			align-items: center;
			transition: all 0.5s ease-in;
		}

		.module_right {
			width: 55px;
			background: rgba(255, 255, 255, 0.3);
			text-align: center;
			display: flex;
			flex-direction: column;
			align-self: flex-end;
			position: absolute;
			top: 20%;
			transition: all 0.5s ease-in-out;
		}

		.module_bottom .button {
			color: #fff;
			background: transparent;
			border: 0;
			outline: 0;
			cursor: pointer;
			text-align: center;
			text-shadow: 1px 1px 2px #000;
			transition: all 0.3s ease-in-out;
		}

		.module_bottom .button:hover {
			color: #00ff00
		}

		.module_right .button {
			background: transparent;
			outline: 0;
			cursor: pointer;
			text-align: center;
			transition: all 0.3s ease-in-out;
		}

		video {
			position: absolute;
			left: 0;
			top: 0;

		}

		.pro1,
		.pro2 {
			height: 7px;
			background: #d1cfcf42;
			margin-bottom: 4px;
			border-radius: 0.4rem;

		}

		.pro1::-webkit-progress-bar,
		.pro2::-webkit-progress-bar {
			background: #d1cfcf42;
			border-radius: 0.4rem;
		}

		.pro1::-webkit-progress-value,
		.pro2::-webkit-progress-value {
			background: #fff;
			border-radius: 0.4rem;
		}

		.time {
			color: #fff;
		}

		.huakuai1,
		.huakuai2 {
			display: inline-block;
			height: 12px;
			margin-bottom: -1px;
			border-radius: 15px;
			background: #fff;
			position: absolute;
			top: 6px;
			left: -12.5px;
			box-shadow: 0 0 3px #000;
		}

		.huakuai1 {
			left: -12.5px;
		}

		.huakuai2 {
			left: -10px;
		}

		.jingdutiao,
		.yingliang {
			position: relative;
		}
	style>
head>

<body>
	<div class="box">
		<video src="video/八重樱_桃源恋歌_WP_1080p.mp4" height="562px" width="1000px" poster="img/suolue1.png">video>
		<div class="module module_bottom">
			<div class="button"><i class="fa fa-play fa-lg">i>div>
			<div class="jingdutiao">
				<progress max="100" class="pro1">progress>
				<div class="huakuai1">div>
			div>
			<div class="time"><span class="time_a">span>/<span class="time_b">span>div>
			<div class="button"><i class="fa fa-volume-up fa-lg">i>div>
			<div class="yingliang">
				<progress max="100" class="pro2">progress>
				<div class="huakuai2">div>
			div>
			<div class="button"><i class="fa fa-arrows-alt fa-lg">i>div>
		div>
		<div class="module module_right">
			<div class="button"><i class="fa fa-share-alt fa-3x">i><br>分享div>
			<div class="button"><i class="fa fa-television fa-3x">i><br>画质div>
			<div class="button"><i class="fa fa-expeditedssl fa-3x">i><br>锁屏div>
			<div class="button"><i class="fa fa-thumbs-up fa-3x">i><br>赞赏div>
		div>
	div>
	<script>
		var i = {};
		var timer = null;
		var box = document.querySelector('.box');
		var module = document.querySelectorAll('.module');
		var button = document.querySelectorAll('.button');
		var time = document.querySelector('.time');
		var time_a = document.querySelector('.time_a');
		var time_b = document.querySelector('.time_b');
		var pro1 = document.querySelector('.pro1');
		var pro2 = document.querySelector('.pro2');
		var huakuai1 = document.querySelector('.huakuai1');
		var huakuai2 = document.querySelector('.huakuai2');
		var jingdutiao = document.querySelector('.jingdutiao');
		var yingliang = document.querySelector('.yingliang');
		for (var n = 0; n < button.length; n++) {
			i[n] = button[n].querySelector('i');
		}
		var video = document.querySelector('video');
		module[0].style.bottom = '-56.2px';
		module[1].style.right = '-55px';
		pro1.style.width = '680px';
		pro2.style.width = '100px';
		huakuai1.style.width = '25px';
		huakuai2.style.width = '20px';
		var pro1wid = parseFloat(pro1.style.width); //进度条
		var pro2wid = parseFloat(pro2.style.width); //音量条
		var kuai1wid = parseFloat(huakuai1.style.width) / 2; //滑块1的一半
		var kuai2wid = parseFloat(huakuai2.style.width) / 2; //滑块2的一半

		box.onmousemove=function () {
			if (module[0].style.bottom == '-56.2px' && module[1].style.right == '-55px') {
				module[0].style.bottom = '0px';
				module[1].style.right = '0px';
			}
		}
		/* box.addEventListener('mouseout', eventPosition);

		function eventPosition(e) {
			var x = e.clientX;
			var y = e.clientY;
			var divx1 = module[0].offsetLeft;
			var divy1 = module[0].offsetTop;
			var divx2 = divx1 + module[0].offsetWidth;
			var divy2 = divy1 + module[0].offsetHeight;
			setTimeout(zhixin, 3000);

			function zhixin() {
				if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
					module[0].style.bottom = '-56.2px';
					module[1].style.right = '-55px';
				}
			}
		};
		for (var t = 0; t < module[0].children.length; ++t) {
			module[0].children[t].onmouseover = function () {
				document.eventPosition = null;
			}
		} */

		video.addEventListener('click', bofang);
		button[0].addEventListener('click', bofang);

		function bofang() {
			if (video.paused) {
				video.play();
				i[0].setAttribute('class', 'fa fa-pause fa-lg');
				timer = setInterval(timego, 500);

				function timego() {
					pro1.setAttribute("value", "" + video.currentTime.toFixed(2));
					time_a.innerHTML = (video.currentTime / 60).toFixed(2);
				}
			} else {
				video.pause();
				i[0].setAttribute('class', 'fa fa-play fa-lg');
				clearInterval(timer);
			}
		}

		button[1].onclick=function() {
			if (video.muted) {
				video.muted = false;
				i[1].setAttribute('class', 'fa fa-volume-up fa-lg');
			} else {
				video.muted = true;
				i[1].setAttribute('class', 'fa fa-bell-slash fa-lg');
			}
		}

		button[2].onclick=function() {
			if (video.webkitRequestFullScreen) {
				video.webkitRequestFullScreen();
			}
			// if (video.webkitExitFullScreen) {
			// 	video.webkitExitFullScreen();
			// }
		}

		window.onload = function () {
			time_b.innerHTML = (video.duration / 60).toFixed(2);
			time_a.innerHTML = (video.currentTime / 60).toFixed(2);
			pro1.setAttribute("max", "" + video.duration);
			pro2.setAttribute("max", "" + video.volume);
			huakuai2.style.left = 80 - kuai1wid + 'px';
			video.volume = parseFloat(huakuai2.style.left) / pro2wid * video.volume;
			pro2.setAttribute("value", "" + video.volume);
		};

		function pro1control(e) {
			var x0 = e.clientX - jingdutiao.offsetLeft - box.offsetLeft;
			if (x0 >= 0 && x0 <= pro1wid) {
				huakuai1.style.left = x0 - kuai1wid + 'px';
				video.currentTime = x0 / pro1wid * video.duration;
				pro1.setAttribute("value", "" + x0 / pro1wid * video.duration);
				time_a.innerHTML = (x0 / pro1wid * video.duration / 60).toFixed(2);
			} else if (x0 < 0) {
				huakuai1.style.left = -kuai1wid + 'px';
				video.currentTime = 0;
				pro1.setAttribute("value", "0");
				time_a.innerHTML = '0.00';
			} else {
				huakuai1.style.left = pro1wid - kuai1wid + 'px';
				video.currentTime = video.duration;
				pro1.setAttribute("value", "" + video.duration);
				time_a.innerHTML = '' + (video.duration / 60).toFixed(2);
			}
		}
		pro1.onmousedown = function (e) {
			var x0 = e.clientX - jingdutiao.offsetLeft - box.offsetLeft;
			video.currentTime = x0 / pro1wid * video.duration;
			pro1.setAttribute("value", "" + (x0 / pro1wid * video.duration));
			time_a.innerHTML = (x0 / pro1wid * video.duration / 60).toFixed(2);
			huakuai1.style.left = x0 - kuai1wid + 'px';
			document.onmousemove = function (e) {
				pro1control(e);
			}
		}
		huakuai1.onmousedown = function () {
			document.onmousemove = function (e) {
				pro1control(e);
			}
		}
		document.onmouseup = function () {
			document.onmousemove = null;
		}
		video.onplaying = function () {
			video.ontimeupdate = function (e) {
				if (video.currentTime * (pro1wid / video.duration) >= 0 && video.currentTime * (pro1wid / video
						.duration) < pro1wid) {
					huakuai1.style.left = (video.currentTime * (pro1wid / video.duration)) - kuai1wid + 'px';
				}

			}
		}
		video.onpause = function () {
			document.onplaying = null;
		}

		function pro2control(e) {
			var x0 = e.clientX - yingliang.offsetLeft - box.offsetLeft;
			if (x0 >= 0 && x0 <= pro2wid) {
				video.volume = 1;
				var x0 = e.clientX - yingliang.offsetLeft - box.offsetLeft;
				video.volume = x0 / pro2wid * video.volume;
				pro2.setAttribute("value", "" + video.volume);
				huakuai2.style.left = x0 - kuai2wid + 'px';
			} else if (x0 < 0) {
				huakuai2.style.left = -kuai2wid + 'px';
				video.volume = 0;
				pro2.setAttribute("value", "0");
			} else {
				huakuai2.style.left = pro2wid - kuai2wid + 'px';
				video.volume = 1;
				pro2.setAttribute("value", "1");
			}
		}
		pro2.onmousedown = function (e) {
			video.volume = 1;
			var x0 = e.clientX - yingliang.offsetLeft - box.offsetLeft;
			video.volume = x0 / pro2wid * video.volume;
			pro2.setAttribute("value", "" + video.volume);
			huakuai2.style.left = x0 - kuai2wid + 'px';
			document.onmousemove = function (e) {
				pro2control(e);
			}
		}

		huakuai2.onmousedown = function (e) {
			document.onmousemove = function (e) {
				pro2control(e);
			}
		}
	script>
body>

html>

你可能感兴趣的:(JavaScript,H5+CSS3)