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);
};

註：如想實現iOS網頁內聯視頻需要添加“iphone-inline-video.js”這個插件，然後在vedio上面添加“webkit-playsinline”，“playsinline”這兩個屬性

vedio自定義樣式