<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义视频</title>
<style>
* {
margin: 0;
padding: 0;
}
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1501471609099');
/* IE9*/
src: url('iconfont.eot?t=1501471609099#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff?t=1501471609099') format('woff'), /* chrome, firefox */
url('iconfont.ttf?t=1501471609099') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1501471609099#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul {
list-style-type: none;
}
body {
width: 100vw;
height: 100vh;
background: url(img/bg.jpg)center;
background-size: cover;
}
.v-bg {
width: 100vw;
height: 100vh;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
}
.video-box {
position: absolute;
left: 50%;
top: 50%;
width: 600px;
height: 300px;
margin-left: -300px;
margin-top: -200px;
font-size: 0;
-webkit-user-select: none;
}
.v-control {
position: relative;
height: 50px;
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s linear;
}
.v-jdt {
position: absolute;
bottom: 50px;
left: 0;
right: 0;
height: 5px;
background-color: rgba(255, 255, 255, 0.3);
transition: height 0.3s linear;
overflow: hidden;
}
.video-box:hover .v-jdt {
height: 10px;
}
.v-jd {
position: absolute;
left: 0;
width: 0;
height: 10px;
background-color: orange;
}
.v-range {
position: absolute;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
display: none;
background-color: #FFF;
box-shadow: 0 0 5px 2px orange;
}
.video-box:hover .v-range {
display: block;
}
.v-bar {
position: relative;
line-height: 50px;
}
.v-bar li {
position: absolute;
font-size: 20px;
cursor: pointer;
color: #FFF;
}
.v-bar li:not(:nth-child(3)):hover {
color: orange;
}
.v-bar li:nth-child(1) {
left: 15px;
}
.v-bar li:nth-child(2) {
left: 48px;
}
.v-bar li:nth-child(3) {
left: 88px;
font-size: 12px;
}
#all-time {
color: #999;
}
.v-bar li:nth-child(4) {
right: 48px;
}
.v-bar li:nth-child(5) {
right: 15px;
}
.v-bar li:nth-child(4):hover .volum-bar {
display: block;
}
.volum-bar {
position: absolute;
bottom: 50px;
left: -5px;
width: 25px;
height: 100px;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
.volum-bar div {
position: relative;
width: 5px;
height: 90px;
border-radius: 3px;
margin: 0 auto;
margin-top: 5px;
background-color: #FFF;
transform: rotate(180deg);
}
.volum-bar div i {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #FFF;
left: 10px;
margin-left: -13px;
top: 0;
}
</style>
</head>
<body>
<div class="v-bg">
<div class="video-box">
<video width="600" id="video">
<source src="video/yuebing.mp4" type="video/mp4"></source>
</video>
<div class="v-control">
<div class="v-jdt" id="jdt">
<div class="v-jd" id="jd"></div>
<div class="v-range" id="range"></div>
</div>
<ul class="v-bar">
<li id="paly-pause" class="iconfont"></li>
<li id="next" class="iconfont"></li>
<li><span id="current-time">00:00</span> / <span id="all-time">18:56</span></li>
<li class="iconfont"><span id="volum-m"></span>
<div class="volum-bar">
<div id="volum">
<i id="volum-btn"></i>
</div>
</div>
</li>
<li class="iconfont" id="full"></li>
</ul>
</div>
</div>
</div>
</body>
<script>
var video = document.getElementById("video");
var play_pause = document.getElementById("paly-pause");
var currentTime = document.getElementById("current-time");
var allTime = document.getElementById("all-time");
var v_jdt = document.getElementById("jdt");
var v_jd = document.getElementById("jd");
var v_range = document.getElementById("range");
var volum = document.getElementById("volum");
var v_btn = document.getElementById("volum-btn");
var volum_m = document.getElementById("volum-m");
var full = document.getElementById("full");
var contorl = document.getElementsByClassName("v-control");
if(video.autoplay) {
play_pause.innerHTML = "";
}
video.poster.src = "";
video.addEventListener("canplay", function() {
play_pause.onclick = function() {
if(video.paused) {
video.play();
this.innerHTML = "";
} else {
video.pause();
this.innerHTML = "";
}
}
allTime.innerText = toMS(video.duration);
video.addEventListener("timeupdate", function() {
currentTime.innerText = toMS(video.currentTime);
v_jd.style.width = (video.currentTime / video.duration) * 100 + "%";
v_range.style.left = (video.currentTime / video.duration) * 100 + "%";
});
}, false);
v_jdt.onclick = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.id == "jdt" || target.id == "jd") {
var x = e.offsetX;
var w = this.offsetWidth;
v_jd.style.width = (x / w) * 100 + "%";
v_range.style.left = (x / w) * 100 + "%";
video.currentTime = video.duration * (x / w);
}
}
volum.onclick = function(e) {
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.id == "volum") {
var y = e.offsetY;
var h = this.offsetHeight;
video.volume = (y / h);
v_btn.style.top = (y / h) * 100 + "%";
if(video.volume == 0) {
volum_m.innerHTML = "";
video.muted = true;
} else {
volum_m.innerHTML = "";
video.muted = false;
}
}
}
volum_m.onclick = function() {
if(video.muted) {
this.innerHTML = "";
video.muted = false;
} else {
this.innerHTML = "";
video.muted = true;
}
}
full.onclick = function() {
if(video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if(video.webkitRequestFullScreen) {
video.webkitRequestFullScreen();
} else if(video.msRequestFullScreen) {
video.msRequestFullscreen();
} else {
video.requestFullscreen();
}
contorl.style.width = 100 + "%";
contorl.style.height = 100 + "%";
contorl.style.zindex = "50";
}
function toMS(time) {
var m = Math.floor(time / 60);
m = (m > 9) ? m : "0" + m;
var s = Math.floor(time % 60);
s = (s > 9) ? s : "0" + s;
return m + ":" + s;
}
</script>
</html>
