实验 视频播放器
效果图：
代码：
<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>