<!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>
