<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放器实例</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="wrap">
<video src="http://www.17sucai/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4"></video>
<div class="control">
<div class="btns">
<span class="start"></span>
<span class="stop"></span>
</div>
<div class="progress">
<div class="wrap">
<div class="inner"></div>
</div>
<div class="deeppink"></div>
</div>
<div class="others">
<div class="time">
<span class="now">00:00:00</span>/<span class="all">00:00:00</span>
</div>
<div class="sound">
<div class="switch">
<span></span>
</div>
<div class="progress">
<div class="wrap">
<div class="inner"></div>
<div class="deeppink"></div>
</div>
</div>
</div>
<div class="full-screen">
<span></span>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="./js/drag.js"></script>
<script>
window.onload = function () {
var video = document.querySelector('#wrap > video');
var control = document.querySelector('#wrap > .control');
var progress = document.querySelector('#wrap > .control > .progress');
var inner = document.querySelector('#wrap > .control > .progress > .wrap > .inner');
var deeppink = document.querySelector('#wrap > .control > .progress > .deeppink');
var inner2 = document.querySelector('#wrap > .control > .others >.sound >.progress > .wrap > .inner');
var deeppink2 = document.querySelector('#wrap > .control > .others >.sound >.progress > .wrap > .deeppink');
var start = document.querySelector('#wrap >.control> .btns > .start');
var stop = document.querySelector('#wrap >.control> .btns > .stop');
var allSpan = document.querySelector('#wrap >.control >.others > .time > span.all');
var nowSpan = document.querySelector('#wrap >.control >.others > .time > span.now');
//音量相关
var switchNode = document.querySelector('#wrap >.control >.others > .sound > .switch');
var switchSpan = document.querySelector('#wrap >.control >.others > .sound > .switch > span');
var progressV = document.querySelector('#wrap > .control > .others > .sound > .progress');
var innerV = document.querySelector('#wrap > .control >.others > .sound > .progress > .wrap > .inner');
var deeppinkV = document.querySelector('#wrap > .control >.others > .sound > .progress > .wrap > .deeppink');
//全屏
var fullScreen = document.querySelector('#wrap > .control >.others > .full-screen');
var fullScreenSpan = document.querySelector('#wrap > .control >.others > .full-screen > span');
video.width = document.documentElement.clientWidth;
video.height = document.documentElement.clientHeight - control.offsetHeight;
window.onresize = function () {
if (document.documentElement.clientWidth >= 600) {
video.width = document.documentElement.clientWidth;
video.height = document.documentElement.clientHeight - control.offsetHeight;
}
}
//播放功能
var timer = 0;
//同步音量
var flag = 0;
var isFullScreen = false;
player();
function player() {
//全屏
fullScreen.onclick = function(){
if(isFullScreen){
//全屏 -> 退出全屏
removeClass(fullScreenSpan,'active');
isFullScreen = false;
if(document.exitFullscreen){
document.exitFullscreen();
}
else if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
else if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
else if(document.msExitCancelFullScreen){
document.msExitCancelFullScreen();
}
}else{
addClass(fullScreenSpan,'active')
isFullScreen = true;
var docElm = document.documentElement;
if(docElm.requestFullscreen){
docElm.requestFullscreen();
}
else if(docElm.mozRequestFullScreen){
docElm.mozRequestFullScreen();
}
else if(docElm.webkitRequestFullScreen){
docElm.webkitRequestFullScreen();
}
else if(docElm.msRequestFullScreen){
docElm.msRequestFullScreen();
}
}
}
//音量控制
innerV.style.left = deeppinkV.style.width = progressV.clientWidth - innerV.offsetWidth + "px";
switchNode.onclick = function () {
if (video.muted) {
// 静音 -> 不静音
video.muted = false;
video.volume = 1;
removeClass(switchSpan, 'active');
var vvl = 0;
flag = flag == 0 ? 1 :flag;
innerV.style.left = deeppinkV.style.width = (progressV.clientWidth - innerV.offsetWidth) * flag + "px";
} else {
video.muted = true;
video.volume = 0;
addClass(switchSpan, 'active');
innerV.style.left = deeppinkV.style.width = 0 + 'px';
}
}
//时间的显示
video.addEventListener("loadeddata", function () {
allSpan.innerHTML = changeTime(video.duration);
})
//进度条功能
progress.onclick = function (ev) {
ev = ev || event;
addClass(start, 'active');
video.play();
timer = setInterval(move, 100);
video.currentTime = video.duration * ((ev.clientX - this.offsetLeft) / (progress.clientWidth - inner.offsetWidth))
}
//结束按钮
stop.onclick = function () {
removeClass(start, 'active');
video.pause();
clearInterval(timer);
inner.style.left = deeppink.style.width = 0 + 'px';
video.currentTime = 0;
}
//暂停按钮
start.onclick = function () {
if (video.paused) {
//暂停 -> 播放 -->显示暂停按钮
addClass(this, 'active');
video.play();
timer = setInterval(move, 100);
} else {
removeClass(this, 'active');
video.pause();
clearInterval(timer);
}
}
function move() {
inner.style.left = deeppink.style.width = (video.currentTime / video.duration) * (progress.clientWidth - inner.offsetWidth) + 'px';
nowSpan.innerHTML = changeTime(video.currentTime);
}
}
//进度条小滑块拖拽时的逻辑
var callBack1 = {
move: function () {
deeppink.style.width = this.offsetLeft + 'px';
var scale = this.offsetLeft / (progress.clientWidth - inner.offsetWidth);
video.currentTime = video.duration * scale;
nowSpan.innerHTML = changeTime(video.currentTime);
}
}
//音量条小滑块拖拽时的逻辑
var callBack2 = {
move: function () {
deeppink2.style.width = this.offsetLeft + 'px';
var scale = this.offsetLeft / (progressV.clientWidth - innerV.offsetWidth);
flag = scale;
video.volume = scale;
if (video.volume == 0) {
video.muted = true;
addClass(switchSpan, 'active');
} else {
removeClass(switchSpan, 'active');
}
}
}
$.drag(inner, callBack1);
$.drag(inner2, callBack2);
//工具类
function changeTime(time) {
time = parseInt(time);
var h = toZero(Math.floor(time / 3600));
var m = toZero(Math.floor((time % 3600) / 60));
var s = toZero(Math.round(time % 3600));
return h + ':' + m + ":" + s;
}
function toZero(num) {
var val = "";
if (num < 10) {
val = "0" + num;
} else {
val = val + num
}
return val;
}
function addClass(node, className) {
var reg = new RegExp("\\b" + className + "\\b");
if (!reg.test(node.className)) {
node.className += (" " + className)
}
}
function removeClass(node, className) {
if (node.className) {
var reg = new RegExp("\\b" + className + "\\b");
var classes = node.className;
node.className = classes.replace(reg, " ");
if (/^\s*$/g.test(node.className)) {
node.removeAttribute("class");
}
} else {
node.removeAttribute("class");
}
}
}
</script>
</html>
更多推荐
h5-视频播放器实例-html代码
发布评论