用javascript做一個視頻播放器

以前我們在網頁上播放視頻，都是要麻煩flash來實現。看着那一大段的<object>真心覺得累。隨着html5的不斷普及，現在是時候使用html5提供的video元素來做點正經事了，但是要把界面打造的更加個性一點，需要一點javascript和一點css.如果能再加一個漂亮的美工，那就完全不在話下了。在項目早些時候

我們是通過phoneGap提供的插件實現的視頻播放，但是有一個問題，翻頁的時候，視頻沒有跟着一起動，感覺就是脫離了頁面。后來采用video

來播放就可以一起移動了，但是它的默認樣式與我們的項目風格太不協調了。於是我就查了一下video的api 進行了自定義。具體代碼稍后貼出，也可以從我的git上下載。

下面展示一下效果：

界面有點簡單，甚至可以說比較丑。這只能說美工不給力，但是作為一個demo，我想控制的

開關，進度條，時間等，都可以進行自定義，這就足夠了。如果你覺得有興趣，不妨看下后面的源碼，超級

簡單：

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

    })();

不過由於安卓上對video的實現不是很完整，還是保留了用phoneGap播放，蘋果和PC采用video播放。

需要指出的是，蘋果上的iphone是不允許我們對video的界面元素進行控制的，只能用默認的風格。

此外呢,html5的video元素，對視頻格式也有要求，具體查看w3c的說明文檔。

有興趣嘗試一下的，可以自己寫或從以下地址下載源碼：

https://github.com/bjtqti/xxt/tree/master/html5

另外有一個叫videojs的網站上，有完整的實現。只是體積太大，不介意的可以直采用。