現在隨著html5的漸熱，越來越多的web開發者都開始選擇使用html5寫出一些比較好的web應用。我也相信html5在未來會有很大的發展前景，額，跑題了，繼續說我們這個問題。

閒話不多說，先上程式碼
下面是JavaScript程式碼

// 為了不隨意的建立全域性變數，我們將我們的程式碼放在一個自己呼叫自己的匿名函式中，這是一個好的程式設計習慣
        (function(window, document){
            // 獲取要操作的元素
            var video = document.getElementById("video");
            var
 
 videoControls = document.getElementById("videoControls");
            var videoContainer = document.getElementById("videoContainer");
            var controls = document.getElementById("video_controls");
            var playBtn = document.getElementById("playBtn");
            var fullScreenBtn = document
 
.getElementById("fullScreenBtn");
            var progressWrap = document.getElementById("progressWrap");
            var playProgress = document.getElementById("playProgress");
            var fullScreenFlag = false;
            var progressFlag;

            // 建立我們的操作物件，我們的所有操作都在這個物件上。
            var
 
 videoPlayer = {
                init: function(){
                    var that = this;
                    video.removeAttribute("controls");
                    bindEvent(video, "loadeddata", videoPlayer.initControls);
                    videoPlayer.operateControls();
                },
                initControls: function(){
                    videoPlayer.showHideControls();
                },
                showHideControls: function(){
                    bindEvent(video, "mouseover", showControls);
                    bindEvent(videoControls, "mouseover", showControls);
                    bindEvent(video, "mouseout", hideControls);
                    bindEvent(videoControls, "mouseout", hideControls);
                },
                operateControls: function(){
                    bindEvent(playBtn, "click", play);
                    bindEvent(video, "click", play);
                    bindEvent(fullScreenBtn, "click", fullScreen);
                    bindEvent(progressWrap, "mousedown", videoSeek);
                }
            }

            videoPlayer.init();

            // 原生的JavaScript事件繫結函式
            function bindEvent(ele, eventName, func){
                if(window.addEventListener){
                    ele.addEventListener(eventName, func);
                }
                else{
                    ele.attachEvent('on' + eventName, func);
                }
            }
            // 顯示video的控制面板
            function showControls(){
                videoControls.style.opacity = 1;
            }
            // 隱藏video的控制面板
            function hideControls(){
                // 為了讓控制面板一直出現，我把videoControls.style.opacity的值改為1
                videoControls.style.opacity = 1;
            }
            // 控制video的播放
            function play(){
                if ( video.paused || video.ended ){              
                    if ( video.ended ){ 
                        video.currentTime = 0;
                        } 
                    video.play();
                    playBtn.innerHTML = "暫停"; 
                    progressFlag = setInterval(getProgress, 60);
                } 
                else{ 
                    video.pause(); 
                    playBtn.innerHTML = "播放";
                    clearInterval(progressFlag);
                } 
            }
            // 控制video是否全屏，額這一部分沒有實現好，以後有空我會接著研究一下
            function fullScreen(){
                if(fullScreenFlag){
                    videoContainer.webkitCancelFullScreen();
                }
                else{
                    videoContainer.webkitRequestFullscreen();
                }
            }
            // video的播放條
            function getProgress(){
                var percent = video.currentTime / video.duration;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
            }
            // 滑鼠在播放條上點選時進行捕獲並進行處理
            function videoSeek(e){
                if(video.paused || video.ended){
                    play();
                    enhanceVideoSeek(e);
                }
                else{
                    enhanceVideoSeek(e);
                }

            }
            function enhanceVideoSeek(e){
                clearInterval(progressFlag);
                var length = e.pageX - progressWrap.offsetLeft;
                var percent = length / progressWrap.offsetWidth;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                video.currentTime = percent * video.duration;
                progressFlag = setInterval(getProgress, 60);
            }

        }(this, document))

下面是html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5-Video-Player</title>
    <style type="text/css">
        .videoPlayer{
            border: 1px solid #000;
            width: 600px;
        }
        #video{
            margin-top: 0px;
        }
        #videoControls{
            width: 600px;
            margin-top: 0px;
        }
        .show{
            opacity: 1;
        }
        .hide{
            opacity: 0;
        }
        #progressWrap{
            background-color: black;
            height: 25px;
            cursor: pointer;
        }
        #playProgress{
            background-color: red;
            width: 0px;
            height: 25px;
            border-right: 2px solid blue;
        }
        #showProgress{
            background-color: ;
            font-weight: 600;
            font-size: 20px;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <div class="">
        <h1>HTML5_Video_Player</h1>
        <div class="videoPlayer" id="videoContainer">
            <video id="video" 
            width="600" height="360" 
            preload controls
            >
                <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>
                <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>
            </video>
            <div id="videoControls"> 
                <div id="progressWrap">  
                    <div id="playProgress">  
                        <span id="showProgress">0</span> 
                    </div>
                </div>
                <div>
                    <button id="playBtn" title="Play"> 播放 </button> 
                    <button id="fullScreenBtn" title="FullScreen Toggle">  全屏 </button>
                </div> 
            </div> 
        </div>
    </div>
</body>
</html>

關於程式碼的功能，上面都有註釋，應該都還好理解。

另外，如果你要詳細的瞭解一下html5的video標籤的話，推薦看看這兩個文件。
w3-video和這篇很重要

希望可以幫到你。