自定義video樣式

和朋友聊天說到了video自定義樣式問題，今天抽空簡單試驗了一下，下面貼上代碼。

dom結構如下：

<video id="video1" width="399" height="300" poster="video_bg.jpg">
    <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type="video/mp4" />
</video>
<div id="isPlay" class="stop"></div>
<div id="current"></div>        <!-- 當前進度 -->
<div id="buffered"></div>       <!-- 下載進度 秒 -->
<div id="duration"></div>       <!-- 總時長 -->
<div id="fullScreen">全屏</div> <!-- 全屏按鈕 -->
<div id="progress">             <!-- 進度條 -->
    <div id="bar"></div>        <!-- 播放進度 -->
    <div id="buffer"></div>     <!-- 緩存進度 -->
</div>

js代碼如下：

var isPlay = document.getElementById('isPlay');
var video1 = document.getElementById('video1');
var current = document.getElementById('current');
var buffered = document.getElementById('buffered');
var duration = document.getElementById('duration');
var fullScreen = document.getElementById('fullScreen');
var progress = document.getElementById('progress');
var bar = document.getElementById('bar');
var buffer = document.getElementById('buffer');
// 補零
function zeroFill(num){
    if (num<10) {
        num = "0" +num;
    }
    return num;
};
// 處理秒數為時分秒 h:m:s
function getTime(num){
    var m = zeroFill(Math.floor(num/60)),remainder = zeroFill(Math.floor(num%60)),h = zeroFill(Math.floor(m/60)),time = ''+h+':'+m+':'+remainder+'';
    return time;
};
        //全屏方法
function launchFullScreen(element) {  
  if(element.requestFullscreen) {  
    element.requestFullscreen();  
  } else if(element.mozRequestFullScreen) {  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullscreen) {  
    element.webkitRequestFullscreen();  
  } else if(element.msRequestFullscreen) {  
    element.msRequestFullscreen();  
  }  
};
// 播放暫停點擊方法
isPlay.onclick=function(){
    if(isPlay.className=='stop'){
        video1.play();
        bufferTimer = setInterval(function(){
            buffer.style.width = video1.buffered.end(0)/video1.duration*100+"%";
        },1000/30);
        if(video1.buffered.end(0) == video1.duration){
            buffer.style.width = "100%";
            clearInterval(bufferTimer);
        }
        timer = setInterval(function(){
            bar.style.width = video1.currentTime/video1.duration*100+"%";
        },1000/30)
        isPlay.className="play";
    }else if(isPlay.className=='play'){
        video1.pause();
        clearInterval(timer);
        isPlay.className="stop";
    }
};
// 當視頻播放位置已經改變
video1.ontimeupdate = function(){
    current.innerHTML = getTime(this.currentTime);
    duration.innerHTML = getTime(this.duration);
    buffered.innerHTML = this.buffered.end(0);
    if(this.currentTime == this.duration){
        isPlay.className="stop";
    }
};
// 進度條點擊方法
progress.onclick = function(e){
    var barLength = e.pageX - progress.offsetLeft;
    video1.currentTime = barLength/progress.clientWidth*video1.duration;
    bar.style.width = barLength/progress.clientWidth*100+"%";
    
};
// 全屏按鈕點擊方法
fullScreen.onclick = function(){
    launchFullScreen(video1);
};

實現效果如下：

如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。