(function(win,doc){
var playerSetting = {
width:150,
height:300,
controlsBoxColor:"#000",
controlsBoxMinHeight:"40px",
currentTimeLineBox:"80%",
currentTimeLineColor:"#fff",
cirColor:"#fff",
cirHeight:"20%",
cirLeft:0,
init:function(){
/*定义init()内部公共变量 Start-----------------------------------*/
var Box = document.querySelector(".PlayerBox");
var video = document.querySelector(".video");
var controlsBox = document.createElement("div");
controlsBox.className = "controlsBox";
var currentTimeLineBox = document.createElement("div");
currentTimeLineBox.className = "currentTimeLineBox";
var currentTimeLine = document.createElement("div");
currentTimeLine.className = "currentTimeLine";
var cir = document.createElement("div");
var currentTime = document.createElement("div");
currentTime.className = "currentTime";
cir.className = "cir";
var playButton = document.createElement("div");
playButton.className = "playButton";
var Time = document.createElement("span");
Time.className = "Time";
var play = true;
var go = false;
var cirHand = false;
var Minute;
var Hour;
var S;
var _Minute;
var _Hour;
var _S;
Box.style.position = "relative";
/*定义init()内部公共变量 End-----------------------------------*/
/*窗口缩放时执行的事件 Start-----------------------------------*/
window.onresize = function(){
video.style.width = "100%";
//video标签宽高适应盒子
controlsBox.style.width = Box.offsetWidth + "px";
controlsBox.style.height = "10%";
controlsBox.style.minHeight = playerSetting.controlsBoxMinHeight;
controlsBox.style.backgroundColor = playerSetting.controlsBoxColor;
controlsBox.className = "controlsBox";
controlsBox.style.position = "absolute";
controlsBox.style.bottom = "0px";
controlsBox.style.backgroundColor = "rgba(0,0,0,0.4)";
controlsBox.style.transition = "all 1s";
//controlsBox样式设置
currentTimeLineBox.style.width = playerSetting.currentTimeLineBox;
currentTimeLineBox.style.height = "100%";
currentTimeLineBox.style.position = "relative";
//controls盒子样式
currentTimeLine.style.height = "1px";
currentTimeLine.style.width = "100%";
currentTimeLine.style.position = "absolute";
currentTimeLine.style.top = "50%";
currentTimeLine.style.marginTop = "-1px";
currentTimeLine.style.backgroundColor = playerSetting.currentTimeLineColor;
//时间轴的样式
cir.style.position = "absolute";
cir.style.height = playerSetting.cirHeight;
cir.style.width = "0px";
setTimeout(function(){
cir.style.width = cir.offsetHeight +"px";
cir.style.borderRadius = "500px";
cir.style.top = "50%";
cir.style.marginTop = -cir.offsetHeight*0.5 +"px";
},100)
cir.style.backgroundColor = playerSetting.cirColor;
//cir(拖动圆球)样式
currentTime.style.height = "3px";
currentTime.style.width = playerSetting.cirLeft + "px";
currentTime.style.position = "absolute";
currentTime.style.left = "0";
currentTime.style.top = "50%";
currentTime.style.marginTop = "-1.5px";
currentTime.style.backgroundColor = "rgba(255,255,255,0.8)";
//currentTime的样式
playButton.style.width = "0px";
playButton.style.height = "0px";
playButton.style.borderTop = "40px solid transparent";
playButton.style.borderBottom = "40px solid transparent";
playButton.style.Left = "60px solid rgba(255,255,255,0)"
playButton.style.borderLeftColor = "rgba(0,0,0,0.5)";
playButton.style.position = "absolute";
playButton.style.top = "42%";
playButton.style.left = "47%";
playButton.style.transition = "all 0.5s";
//playButton的样式
/*播放时间转换部分 Start------------------------------*/
if(video.currentTime<60){
Hour = 0;
Minute = 0;
S = 0;
}
if(video.duration>=60&&video.duration<3600){
Hour = 0;
Minute = Math.floor(video.duration/60);
S = Math.floor(video.duration%60);
}
if(video.duration>=3600){
Hour = Math.floor(video.duration/3600);
Minute = Math.floor(video.duratio%60)-Hour*60;
S = Math.floor(video.duration) - Hour*3600 - Minute*60;
}
//总播放时长
if(video.currentTime<60){
_Hour = 0;
_Minute = 0;
_S = 0;
}
if(video.currentTime>=60&&video.currentTime<3600){
_Hour = 0;
_Minute = Math.floor(video.currentTime/60);
_S = Math.floor(video.currentTime%60);
}
if(video.currentTime>=3600){
_Hour = Math.floor(video.currentTime/3600);
_Minute = Math.floor(video.duratio%60)-_Hour*60;
_S = Math.floor(video.currentTime) - _Hour*3600 - _Minute*60;
}
//当前播放时长
Time.innerHTML =_Hour + ":"+ _Minute + ":"+ _S +"/"+Hour + ":" + Minute + ":" + S;
/*播放时间转换部分 End----------------------------------------*/
Time.style.top = "0";
Time.style.position = "absolute";
Time.style.right = "5%";
Time.style.color = "rgba(255,255,255)";
setTimeout(()=>{
Time.style.marginTop = -Time.offsetHeight*0.51 + "px";
},10)
//Time的样式
Box.appendChild(controlsBox);//在Box中添加controls盒子
Box.appendChild(playButton);
controlsBox.appendChild(currentTimeLineBox);//在controlsBox中插入时间轴
controlsBox.appendChild(Time);
currentTimeLineBox.appendChild(currentTimeLine);
currentTimeLineBox.appendChild(cir);
currentTimeLineBox.appendChild(currentTime);
}
/*窗口缩放时执行的事件 End---------------------------------------*/
/*页面加载以后执行内容 Start--------------------------------------*/
window.onload = function(){
video.style.width = "100%";
//video标签宽高适应盒子
controlsBox.style.width = Box.offsetWidth + "px";
controlsBox.style.height = "10%";
controlsBox.style.minHeight = playerSetting.controlsBoxMinHeight;
controlsBox.style.backgroundColor = playerSetting.controlsBoxColor;
controlsBox.className = "controlsBox";
controlsBox.style.position = "absolute";
controlsBox.style.bottom = "0px";
controlsBox.style.backgroundColor = "rgba(0,0,0,0.4)";
controlsBox.style.transition = "all 1s";
//controlsBox样式设置
currentTimeLineBox.style.width = playerSetting.currentTimeLineBox;
currentTimeLineBox.style.height = "100%";
currentTimeLineBox.style.position = "relative";
//controls盒子样式
currentTimeLine.style.height = "1px";
currentTimeLine.style.width = "100%";
currentTimeLine.style.position = "absolute";
currentTimeLine.style.top = "50%";
currentTimeLine.style.marginTop = "-1px";
currentTimeLine.style.backgroundColor = playerSetting.currentTimeLineColor;
//时间轴的样式
cir.style.position = "absolute";
cir.style.height = playerSetting.cirHeight;
cir.style.width = "0px";
controlsBox.style.transition = "all 0.5s";
playButton.style.transition = "all 0.3s";
setTimeout(function(){
cir.style.width = cir.offsetHeight +"px";
cir.style.borderRadius = "500px";
cir.style.top = "50%";
cir.style.marginTop = -cir.offsetHeight*0.5 +"px";
},100)
cir.style.backgroundColor = playerSetting.cirColor;
//cir(拖动圆球)样式
currentTime.style.height = "3px";
currentTime.style.width = playerSetting.cirLeft + "px";
currentTime.style.position = "absolute";
currentTime.style.left = "0";
currentTime.style.top = "50%";
currentTime.style.marginTop = "-1.5px";
currentTime.style.backgroundColor = "rgba(255,255,255,0.8)";
//currentTime的样式
playButton.style.width = "0px";
playButton.style.height = "0px";
playButton.style.borderTop = "40px solid transparent";
playButton.style.borderBottom = "40px solid transparent";
playButton.style.borderLeft = "60px solid rgba(255,255,255,0)"
playButton.style.borderLeftColor = "rgba(0,0,0,0.5)";
playButton.style.position = "absolute";
playButton.style.top = "42%";
playButton.style.left = "47%";
playButton.style.transition = "all 0.5s";
//playButton的样式
/*播放时间转换部分 Start------------------------------*/
if(video.currentTime<60){
Hour = 0;
Minute = 0;
S = 0;
}
if(video.duration>=60&&video.duration<3600){
Hour = 0;
Minute = Math.floor(video.duration/60);
S = Math.floor(video.duration%60);
}
if(video.duration>=3600){
Hour = Math.floor(video.duration/3600);
Minute = Math.floor(video.duratio%60)-Hour*60;
S = Math.floor(video.duration) - Hour*3600 - Minute*60;
}
//总播放时长
if(video.currentTime<60){
_Hour = 0;
_Minute = 0;
_S = 0;
}
if(video.currentTime>=60&&video.currentTime<3600){
_Hour = 0;
_Minute = Math.floor(video.currentTime/60);
_S = Math.floor(video.currentTime%60);
}
if(video.currentTime>=3600){
_Hour = Math.floor(video.currentTime/3600);
_Minute = Math.floor(video.duratio%60)-_Hour*60;
_S = Math.floor(video.currentTime) - _Hour*3600 - _Minute*60;
}
//当前播放时长
Time.innerHTML =_Hour + ":"+ _Minute + ":"+ _S +"/"+Hour + ":" + Minute + ":" + S;
/*播放时间转换部分 End----------------------------------------*/
Time.style.top = "50%";
Time.style.position = "absolute";
Time.style.right = "5%";
Time.style.color = "rgba(255,255,255)";
setTimeout(()=>{
Time.style.marginTop = -Time.offsetHeight*0.54 + "px";
},10)
//Time的样式
Box.appendChild(controlsBox);//在Box中添加controls盒子
Box.appendChild(playButton);
controlsBox.appendChild(currentTimeLineBox);//在controlsBox中插入时间轴
controlsBox.appendChild(Time);
currentTimeLineBox.appendChild(currentTimeLine);
currentTimeLineBox.appendChild(cir);
currentTimeLineBox.appendChild(currentTime);
}
/*页面加载以后执行内容 End---------------------------------------------------*/
/*播放按钮点击事件 Start--------------------------------------------*/
playButton.onclick = ()=>{
percent = video.currentTime / video.duration;
currentTime.style.width = percent*currentTimeLine.offsetWidth + "px";
cir.style.left = percent*currentTimeLine.offsetWidth + "px";
if(percent == 1){
video.currentTime = 0;
}
if(play){
video.play();
play = false;
playButton.style.opacity = "0";
}else{
video.pause();
play = true;
}
}
/*播放按钮点击事件 End-----------------------------------------------*/
/*进度条追踪器 Start-----------------------------------------------*/
video.ontimeupdate = function(){
if(cirHand == false){
percent = video.currentTime / video.duration;
currentTime.style.width = percent*currentTimeLine.offsetWidth + "px";
cir.style.left = percent*currentTimeLine.offsetWidth + "px";
}
/*播放时间转换部分 Start--------------------------------------------*/
if(video.duration<60){
Hour = 0;
Minute = 0;
S = Math.floor(video.currentTime);
}
if(video.duration>=60&&video.duration<3600){
Hour = 0;
Minute = Math.floor(video.duration/60);
S = Math.floor(video.duration%60);
}
if(video.duration>=3600){
Hour = Math.floor(video.duration/3600);
Minute = Math.floor(video.duratio%60)-Hour*60;
S = Math.floor(video.duration) - Hour*3600 - Minute*60;
}
//总播放时长
if(video.currentTime<60){
_Hour = 0;
_Minute = 0;
_S = Math.floor(video.currentTime);
}
if(video.currentTime>=60&&video.currentTime<3600){
_Hour = 0;
_Minute = Math.floor(video.currentTime/60);
_S = Math.floor(video.currentTime%60);
}
if(video.currentTime>=3600){
_Hour = Math.floor(video.currentTime/3600);
_Minute = Math.floor(video.duratio%60)-_Hour*60;
_S = Math.floor(video.currentTime) - _Hour*3600 - _Minute*60;
}
//当前播放时长
Time.innerHTML =_Hour + ":"+ _Minute + ":"+ _S +"/"+Hour + ":" + Minute + ":" + S;
/*播放时间转换部分 End---------------------------------------*/
}
/*进度条追踪器 End---------------------------------------------------------------*/
/*拖动进度条圆球 Start-------------------------------------------------------------*/
if("ontouchstart" in window){
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend";
}else{
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
cir.addEventListener(startEvt,function(evt){
evt.stopPropagation();
var startX;
var moveX;
var X;
var cirHand = true;
console.log(currentTimeLine.offsetLeft);
window.addEventListener(moveEvt,function(evt){
var now;
var percenter;
evt.stopPropagation();
if("ontouchstart" in window){
moveX = evt.touches[0].clientX;
}else{
moveX = evt.clientX;
}
if(cirHand){
now = moveX - Box.offsetLeft;//获取圆圈当前的位置Number
percenter = now/currentTimeLine.offsetWidth;//获取进度条比例
video.currentTime = percenter*video.duration;
if(percenter<1&&percenter>0){
cir.style.left = now +"px";//改变圆圈位置
currentTime.style.width = now + "px";
}else if(percenter>=1){
cir.style.left = currentTimeLine.offsetWidth +"px";//改变圆圈位置
currentTime.style.width = currentTimeLine.offsetWidth + "px";
}else if(percenter<=0){
cir.style.left = "0px";
}
//console.log(cirHand);
// let percenter = percentSome/currentTimeLine.offsetWidth;
// video.currentTime = video.duration*percenter;
}
})
window.addEventListener(endEvt,function(evt){
cirHand = false;
})
window.onclick = function(){
cirHand = false;
}
})
/*拖动进度条圆球 End------------------------------------------------------------------*/
/*video播放结束执行函数 Start------------------------------------------*/
video.addEventListener('ended', function () {
this.pause();
play = true;
playButton.style.opacity = "1";
playButton.style.display = "block";
/*播放结束以后显示播放器 Start*/
controlsBox.style.opacity = "1";
setTimeout(()=>{
controlsBox.style.display = "block";
},1000)
/*播放结束以后显示播放器 End*/
}, false);
/*video播放结束执行函数 End------------------------------------------*/
if("ontouchstart" in window){
startEvt = "touchstart";
moveEvt = "touchmove";
endEvt = "touchend";
}else{
startEvt = "mousedown";
moveEvt = "mousemove";
endEvt = "mouseup";
}
var startX;//定义鼠标起始位置
var moveX;//定义鼠标移动过程中的位置
var X;//移动距离
var move = false;//
/*盒子触控函数 Start------------------------------------------------------*/
Box.addEventListener(startEvt,function(ev){
move = true;
if(play == false){
if(controlsBox.style.opacity == "0"){
controlsBox.style.display = "block";
controlsBox.style.opacity = "1";
setTimeout(()=>{
controlsBox.style.opacity = "0";
setTimeout(function(){
controlsBox.style.display = "none";
},1000)
},3000)
}
}
if(ev.type == "touchstart"){
startX = ev.touches[0].clientX;
}else{
startX = ev.clientX;
}
//---------------------------下面是Move函数----------------------------------//
controlsBox.addEventListener(moveEvt,function(ev){
controlsBox.style.display = "block";
controlsBox.style.opacity = "1";
if(move){
video.pause();
}
})
//-----------------------------下面是End函数-------------------------------//
Box.addEventListener(endEvt,function(evt){
move = false;
if(evt.type == "touchend"){
moveX = evt.changedTouches[0].clientX;
}else{
moveX = evt.clientX;
}
X = moveX - startX;
if(X>30){
video.play();
video.currentTime+=0.15;
}else if(X<-30){
video.play();
video.currentTime+=-0.15;
}
})
})
/*盒子触控函数 End------------------------------------------------------*/
/*video事件 Start------------------------------------------------------*/
video.addEventListener(startEvt,function(evt){
let percent1 = video.currentTime / video.duration;//获取当前播放比例
currentTime.style.width = percent1*currentTimeLine.offsetWidth + "px";//播放线条长度监听跟随
cir.style.left = percent1*currentTimeLine.offsetWidth + "px";//圆球当前位置监听跟随
if(play){
video.play();
play = false;
}else{
video.pause();
play = true;
controlsBox.style.opacity = "1";
}
})
video.addEventListener("play",function(){
playButton.style.opacity = "0";
setTimeout(()=>{
if(play == false){
controlsBox.style.opacity = "0";
}
},3000)
})
video.addEventListener("pause",function(){
let percent1 = video.currentTime / video.duration;//获取当前播放比例
currentTime.style.width = percent1*currentTimeLine.offsetWidth + "px";//播放线条长度监听跟随
cir.style.left = percent1*currentTimeLine.offsetWidth + "px";//圆球当前位置监听跟随
playButton.style.display = "block";//播放按钮出现
controlsBox.style.display = "block";//控制器出现
playButton.style.opacity = "1";
controlsBox.style.opacity = "1";
})
/*video事件 End--------------------------------------------------------*/
}
}
function SetStyles(){
var self = this;
playerSetting.init();
this.setting = playerSetting.init;
}
win.SetStyles = SetStyles;
})(window,document);很多功能还没有完善。
具体使用方法是如下：
①将上面代码放在一个XXX.js文件里面；（例videoBox.js文件）
②在页面中引入videoBox.js文件
③在页面中写入一个容器div，class为PlayerBox
<div class="PlayerBox">
</div>④在容器div中写入video，class名为video。(插入视频地址例如2.mp4)
<div class="PlayerBox">
<video class="video" src="2.mp4" preload="preload"></video>
</div>⑤在body内部的末尾添加<script></script>
<script type="text/javascript">
var SetStyles = new SetStyles();
//SetStyles.setting
document.body.addEventListener('touchmove', function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false});
</script>以上就可以运行了！