用javascript做一个视频播放器

(function(){
var video = document.querySelector('video');
var VideoBox = video.parentNode.children[1]; var mediaLength = 500;
var pauseTime = 0; //播放事件
var play = function() {
video.play();
powerBtn.className = 'StopControl';
timeSpan();
} //暂停事件
var pause = function() {
video.pause();
powerBtn.className = 'MainControl';
pauseTime = video.currentTime;
} /*开关按钮*/
var powerBtn = VideoBox.children[0];
/*监听开关事件*/
powerBtn.addEventListener('click',function(e){
video.paused ? play() : pause();
},false); //进度条
var DomProcess = VideoBox.children[1].children[1];
//进度条长度增加
DomProcess.addEventListener('click',function(e){
var left = this.getBoundingClientRect().left;
var length = e.clientX - left;
durationProcessRange(length / mediaLength);
},false); //进度条长度减少
var DomProcessYet = VideoBox.children[1].children[2];
DomProcessYet.addEventListener('click',function(e){
var left = this.getBoundingClientRect().left;
var length = e.clientX - left;
durationProcessRange(length / mediaLength);
},false); //响应播放进度条变化
function durationProcessRange(rangeVal) {
video.currentTime = rangeVal * video.duration;
video.play();
} //监听播放完成事件
video.addEventListener('ended', function () {
powerBtn.className = 'MainControl';
},false); //时间进度处理程序
function timeSpan() {
var total = timeDispose(video.duration);
var ProcessYet = 0;
setInterval(function () {
var ProcessYet = (video.currentTime / video.duration) * mediaLength; DomProcessYet.style.width = ProcessYet + 'px';
var currentTime = timeDispose(video.currentTime);
var SongTime = VideoBox.children[1].children[0];
SongTime.innerHTML = currentTime + " | " + total;
}, 1000);
} //时间处理，因为时间是以s为单位算的，所以这边执行格式处理一下
function timeDispose(number) {
var minute = parseInt(number / 60);
var second = parseInt(number % 60);
minute = minute >= 10 ? minute : "0" + minute;
second = second >= 10 ? second : "0" + second;
return minute + ":" + second;
} })();