分享個人寫的一個簡單播放器
阿新 • • 發佈:2018-11-10
(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>
以上就可以運行了!