摘要：回顧算了不回顧了直接搞起，打開中寫的播放視頻播放按鈕隱藏視頻開始播放當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在中我們就已經實現。

算了不回顧了
直接搞起，打開JS1中寫的bvd.js

播放按鈕隱藏

視頻開始播放
當點擊播放按鈕的時候，播放按鈕將會隱藏，播放視頻，這個不難，在JS1中我們就已經實現。但我們改變一下思維，給視頻添加點擊tap事件，使視頻播放，再觸發播放事件，從而讓播放按鈕隱藏

pro.initEvent = function(){
    var that = this;

    //給播放按鈕圖片添加事件
    this.vimg.addEventListener("tap",function(){
        that.video.play();
    })

    //視頻點擊暫停或播放事件
    this.video.addEventListener("tap",function(){
        if(this.paused || this.ended) {
            //暫停時點擊就播放
            if(this.ended) {//如果播放完畢，就重頭開始播放
                this.currentTime = 0;
            }
            this.play();
        } else {
            //播放時點擊就暫停
            this.pause();
        }
    })
    
    //視頻播放事件
    this.video.addEventListener("play",function(){
        that.vimg.style.display = "none";
    })
    
    
    //獲取到元數據
    this.video.addEventListener("loadedmetadata",function(){
        that.vC.querySelector(".duration").innerHTML = stom(this.duration);
    });
}

下方控制條漸漸隱藏
隱藏并不是難點，重要的是漸漸的隱藏，在這里我們有這么幾種解決方案：

定時器

css3 動畫幀

在這里我們2種結合起來使用

首先我們先定義好一組動畫

@keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}

@-webkit-keyframes vhide {0% {opacity: 1;}100% {opacity: 0;}}

.vhidden {
    animation: vhide 3.5s ease-in;
    -webkit-animation: vhide 3.5s ease-in;
}

其作用就是透明度3.5秒內1=>0，ease-in 就是 由慢到快 的過度效果。有不懂css動畫可以問問度娘哦
然后我們給視頻開始播放事件的時候給控制條添加vhidden樣式類

//視頻播放事件
this.video.addEventListener("play",function(){
    that.vC.classList.add("vhidden");
})

測試效果，果然3.5s內，控制條 慢慢透明，問題是3.5s后，透明度又回到了1，這里我講解一下，是因為動畫幀默認是回彈的，我們可以加個樣式

.vhidden {
    animation: vhide 3.5s ease-in;
    -webkit-animation: vhide 3.5s ease-in;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
}

CSS3 屬性 animation-fill-mode 用來定義元素在動畫結束后的樣子。

animation-fill-mode 的默認值是 none，也就是在動畫結束之后不做任何改動，如果把animation-fill-mode 改成 forwards 則動畫結束后元素的樣式會變成動畫最后一個關鍵幀所規定的樣式。

加上這個樣式后，果然3.5s后，動畫不再回彈了，但是這里要留意一下，控制條并不是不在了而是透明了，如果這時我們有寫控制條的點擊時間，那么在控制條位置點擊，還是會觸發事件，所以呢，我們還可以寫上一段setTimeout來，讓控制條3.5s后隱藏，這個大家可以自行取舍

//視頻播放事件
this.video.addEventListener("play",function(){
    that.vimg.style.display = "none";
    that.vC.classList.add("vhidden");
    that.vCt = setTimeout(function(){
        that.vC.style.visibility = "hidden";
    },3400);
})

為什么動畫過程是3.5s，然而js是是3.4s后執行，這里只是在未寫animation-fill-mode:forwards的情況下做個保險

嘿嘿，視頻可以播放啦！那么現在我們該考慮一下播放中有哪些事要做呢？

1. 控制條進度條慢慢增長

我們需要給視頻添加一條timeupdate音視頻播放位置發生改變時的事件

我們先在獲取視頻元數據事件中，把視頻的長度給拿下來

//獲取到元數據
this.video.addEventListener("loadedmetadata",function(){
    that.vDuration = this.duration;
    that.vC.querySelector(".duration").innerHTML = stom(that.vDuration);
});

再從視頻播放進度更新事件中計算比例，設置進度條的寬度

//視頻播放中事件
this.video.addEventListener("timeupdate", function() {
    var currentPos = this.currentTime;//獲取當前播放的位置
    //更新進度條
    var percentage = 100 * currentPos / that.vDuration; 
    //設置寬度
    that.vC.querySelector(".timeBar").style.width = percentage + "%";
});

可以看到我們的進度條君越來越膨脹了。

2. 當前播放時間變化

同時，我們的當前播放時間顯示也在timeupdate事件中設置

//視頻播放中事件
this.video.addEventListener("timeupdate", function() {
    var currentPos = this.currentTime;//獲取當前播放的位置
    //更新進度條
    var percentage = 100 * currentPos / that.vDuration; 
    that.vC.querySelector(".timeBar").style.width = percentage + "%";
    //更新當前播放時間
    that.vC.querySelector(".current").innerHTML = stom(currentPos);
});

當我們點擊視頻時，如果是暫停，那就開始播放，并觸發播放事件，反之視頻在播放中，點擊視頻就會暫停，并觸發暫停事件。

0. 時間定格

啦啦啦，暫停播放，timeupdate事件自然就不觸發啦，所以進度條和當前播放時間就不會變啦。

1. 播放按鈕顯示

在暫停的時候，顯示出按鈕就行啦

//暫停or停止
this.video.addEventListener("pause",function(){
    that.vimg.style.display = "block";
});

2. 下方控制條顯示

控制條顯示，直接去除那個vhidden樣式類就好啦

//暫停or停止
this.video.addEventListener("pause",function(){
    that.vimg.style.display = "block";
    that.vC.classList.remove("vhidden");
    that.vC.style.visibility = "visible";
});

這樣寫看樣子是沒錯啦，但是，如果大家在之前隱藏控制條的時候寫了setTimeout的話，這個時候就要清除掉哦。

//暫停or停止
this.video.addEventListener("pause",function(){
    that.vimg.style.display = "block";
    that.vC.classList.remove("vhidden");
    that.vC.style.visibility = "visible"; 
    that.vCt && clearTimeout(that.vCt);
});

一個叼叼噠的小視頻播放器怎么可能少的了可進可退能屈能伸呢？

來，我們先為video添加左滑右滑事件

//視頻手勢右滑動事件
this.video.addEventListener("swiperight",function(e){
    this.currentTime += 5;
});
//視頻手勢左滑動事件
this.video.addEventListener("swipeleft",function(e){
    this.currentTime -= 5;
});

可能在電腦上調試會直接進度變0，一開始我也納悶呢，后來發現手機上webview中好像是可行的。

關于 進度條拖動改變視頻進度 我暫時不打算寫，因為我還沒寫。

可能大家會比較關注這個吧：

ios端：去除video標簽webkit-playsinline屬性即可，因為ios對h5的video標簽支持還是比較不錯的

//調用原生方式 全屏播放
pro.nativeMax = function(){
    if(!window.plus){
        //非html5+環境
        return;
    }
    if($.os.ios){
        console.log("ios")
        this.video.removeAttribute("webkit-playsinline");
    }else if($.os.android){
        console.log("android");
        var url = this.video.querySelector("source").src;
        var Intent = plus.android.importClass("android.content.Intent");
        var Uri = plus.android.importClass("android.net.Uri");
        var main = plus.android.runtimeMainActivity();
        var intent = new Intent(Intent.ACTION_VIEW);
        var uri = Uri.parse(url);
        intent.setDataAndType(uri, "video/*");
        main.startActivity(intent);
    }
}

在initEvent中添加點擊 全屏 事件

this.vC.querySelector(".fill").addEventListener("tap",function(){
    that.nativeMax();
});

這樣做有點雞肋啊，就不能來點通用的？

確實這個問題我想了一晚上，決定再拿點干貨來。

先給個狀態，默認為mini播放

var bvd = function(dom) {
    var that = this;
    $.ready(function() {
        //獲取視頻元素
        that.video = document.querySelector(dom || "video");
        //獲取視頻父元素
        that.vRoom = that.video.parentNode;
        //元素初始化
        that.initEm();
        //事件初始化
        that.initEvent();
        //記錄信息
        that.initInfo();
        //當前播放模式 false 為 mini播放
        that.isMax = false;
    })
}

//記錄信息
pro.initInfo = function() {
    var that = this;
    //在onload狀態下，offsetHeight才會獲取到正確的值
    window.onload = function(){
        that.miniInfo = {//mini狀態時的樣式
            width: that.video.offsetWidth + "px",
            height: that.video.offsetHeight + "px",
            position: that.vRoom.style.position,
            transform: "translate(0,0) rotate(0deg)"
        }

        var info = [
                document.documentElement.clientWidth || document.body.clientWidth,
                document.documentElement.clientHeight || document.body.clientHeigth
            ],
            w = info[0],
            h = info[1],
            cha = Math.abs(h - w) / 2;
            
        that.maxInfo = {//max狀態時的樣式
            width: h + "px",
            height: w + "px",
            position: "fixed",
            transform: "translate(-" + cha + "px," + cha + "px) rotate(90deg)"
        }
    }
    
    
}

//全屏 mini 兩種模式切換
pro.switch = function() {
    var vR = this.vRoom;
    //獲取需要轉換的樣式信息
    var info = this.isMax ? this.miniInfo : this.maxInfo;
    for(var i in info) {
        vR.style[i] = info[i];
    }
    this.isMax = !this.isMax;
}

//全屏按鈕
this.vC.querySelector(".fill").addEventListener("tap", function() {
    //that.nativeMax();
    that.switch();
});

瞧一瞧拉，看一看拉

看起來感覺很不錯呢，利用css3的位移和旋轉，讓視頻全屏在了屏幕前，但是問題也隨之而來了

播放按鈕 以及 控制條 在全屏下 似乎隱藏了，其實是video標簽蓋在了父元素之上，我們作出相應的調整

css

.bad-video {
    position: relative;
    /*overflow: hidden;*/
    background-color: #CCCCCC;
}

js
max配置當中，設置zIndex值

            that.maxInfo = {//max狀態時的樣式
                zIndex:99,
                width: h + "px",
                height: w + "px",
                position: "fixed",
                transform: "translate(-" + cha + "px," + cha + "px) rotate(90deg)"
            }

橫向全屏后，左右滑動事件沒有跟著方向改變

        //視頻手勢右滑動事件
        this.video.addEventListener("swiperight", function(e) {
            console.log("right");
            this.currentTime += 5;
        });
        //視頻手勢左滑動事件
        this.video.addEventListener("swipeleft", function(e) {
            console.log("left");
            this.currentTime -= 5;

        });

這TM就很尷尬了，難道我全屏后，手機橫放，還去上下快進快退？

這時候怎么辦呢，不要方

我們先給video注冊一個事件列表

    var events = {};
    
    //增加 或者刪除事件
    pro.eve = function(ename, callback, isF) {
        if(callback && typeof(callback) == "function") {
            isF && arguments.callee(ename);
            events[ename] = callback;
            this.video.addEventListener(ename, events[ename]);
            console.log("添加事件：" + ename);
            return;
        }
        var fun = events[ename] || function(){};
        this.video.removeEventListener(ename, fun);
        console.log("刪除事件：" + ename);
        return fun;
    }

給video事件添加一個代理來刪除添加事件，isF就是在新增這個事件是否刪除之前的這個相同的事件，因為添加事件用匿名函數的話，是不能刪除的，這樣設置一個代理就可以把動態添加的事件記錄在events里面，便于操作

這時我們補上修改當前播放進度和音量的功能

    //跳轉視頻進度 單位 秒
    pro.setCurrentTime = function(t){
        this.video.currentTime += t;
    }
    //設置音量大小 單位 百分比 如 0.1
    pro.setVolume = function(v){
        this.video.volume+= v;
    }

再通過代理給video添加左右上下滑動的事件

        //視頻手勢右滑動事件
        this.eve("swiperight",function(){
            that.setCurrentTime(5);
        });
        
        //視頻手勢左滑動事件
        this.eve("swipeleft", function(e) {
            that.setCurrentTime(-5);
        });
        
        //視頻手勢上滑動事件
        this.eve("swipeup",function(){
            that.setVolume(0.2);
        });
        
        //視頻手勢下滑動事件
        this.eve("swipedown", function(e) {
            that.setCurrentTime(-0.2);
        });

ok，四個方向的滑動事件已經添加過去了，但這是mini模式播放時的事件，在全屏播放下，四個方向事件并沒有跟著video元素方向的改變而改變，這下需要再通過最最最笨的方式判斷是否全屏從而觸發的事件

        //視頻手勢右滑動事件
        this.eve("swiperight",function(){
            if(that.isMax){
                return that.setVolume(0.2);
            }
            that.setCurrentTime(5);
        });
        
        //視頻手勢左滑動事件
        this.eve("swipeleft", function() {
            if(that.isMax){
                return that.setVolume(-0.2);
            }
            that.setCurrentTime(-5);
        });
        
        //視頻手勢上滑動事件
        this.eve("swipeup",function(){
            if(that.isMax){
                return that.setCurrentTime(-5);    
            }
            that.setVolume(0.2);
        });
        
        //視頻手勢下滑動事件
        this.eve("swipedown", function() {
            if(that.isMax){
                return that.setCurrentTime(5);    
            }
            that.setVolume(-0.2);
        });

怎么樣，雖然看起來有點stupid，但是很實用呢

雖說在5+客戶端，android可以調用原生的方式播放，但還是差強人意，我們可以再來看一套解決方案

初始化時，記錄mini時的樣式，全屏時，通過修改視頻寬度為屏幕高度，視頻高度修改為視頻寬度，再利用5+的屏幕旋轉，設置全屏，隱藏狀態欄

0)去除手勢事件判斷

因為現在是準備改變移動設備的方向，所以，手勢方向會跟著設備方向改變

1)去除 css3 旋轉以及位移

    //記錄信息
    pro.initInfo = function() {
        var that = this;
        //在onload狀態下，offsetHeight才會獲取到正確的值
        window.onload = function() {
            that.miniInfo = { //mini狀態時的樣式
                zIndex: 1,
                width: that.video.offsetWidth + "px",
                height: that.video.offsetHeight + "px",
                position: that.vRoom.style.position
            }

            that.maxInfo = { //max狀態時的樣式
                zIndex: 99,
                width: "100%",
                height: that.sw + "px",
                position: "fixed"
            }

        }

    }

2）該用5+的設置全屏以及隱藏狀態欄

    //全屏 mini 兩種模式切換
    pro.switch = function() {
        var vR = this.vRoom;
        //獲取需要轉換的樣式信息
        var info = this.isMax ? this.miniInfo : this.maxInfo;

        for(var i in info) {
            vR.style[i] = info[i];
        }
        this.isMax = !this.isMax;

        plus.navigator.setFullscreen(this.isMax);
        if(this.isMax) {
            //橫屏
            plus.screen.lockOrientation("landscape-primary");
        } else {
            //豎屏
            plus.screen.lockOrientation("portrait-primary");
        }

    }

3）全屏狀態下，android端返回鍵，觸發退出全屏

pro.initEvent = function() {
    //.......省略其他代碼
    
    this.oback = $.back;
        //監聽安卓返回鍵
        $.back = function() {
            if(that.isMax) {
                that.switch();
                return;
            }
            that.oback();
        }
}

效果圖

嘿嘿，一個在移動端的播放器怎么能少得了 自動切換 橫豎屏呢？
在個小節當中就講了如何手動切換全屏，接下來重力感應切換橫屏，需要用到5+的API Accelerometer 加速度感應

簡單說：重力加速度感應可以想象成一個小球在坐標系中
三個方向上的加速度。永遠以手機屏幕為準

啥是加速度？額，就是物理書上的

手機水平放置向上是y軸正向
向右是x軸正向，向外是z軸正向

啥是xyz軸？額，就是高數書上的

哎呀，你把手機豎屏正直的放在地上，你人正直走上去，現在你站在你的手機的屏幕上，然后你的右手打開伸直，這就是x軸，你現在看著前面，這就是y軸，你的頭頂就是z軸。這樣講明白了不，但是并不是真的要你踩手機，23333

您也可以選擇查看其他講解：Android-傳感器開發-方向判斷

x,y軸變化：

手機屏幕向上水平放置時： (x,y,z) = (0, 0, -9.81)
當手機頂部抬起時： y減小，且為負值
當手機底部抬起時： y增加，且為正值
當手機右側抬起時： x減小，且為負值
當手機左側抬起時： x增加，且為正值

z軸的變化：
手機屏幕向上水平放置時，z= -9.81
手機屏幕豎直放置時， z= 0
手機屏幕向下水平放置時，z= 9.81

屏幕橫豎切換條件
y<=-5時， 切換為豎向
x<=-5時， 換為橫向

ok，我們新增2個方法，用于打開和關閉設備監控

    //開啟方向感應
    pro.startWatchAcc = function(){
        var that = this;
        this.watchAccFun = plus.accelerometer.watchAcceleration(function(a) {
                if(that.getIsMax()){
                    //當前為全屏狀態
                    //判斷是否滿足豎屏Mini狀態
                    a.yAxis>=5 && that.setIsMax(false);
                }else{
                    //當前為Mini狀態
                    //判斷是否滿足全屏Max狀態
                    Math.abs(a.xAxis) >=5 && that.setIsMax(true); 
                }
            }, function(e) {
                //出錯了大不了 不自動旋轉唄  讓它手動 切換
                console.log("Acceleration error: " + e.message);
                that.clearWatchAcc();
            },{
                frequency:1200
            });
    }
    //關閉方向感應
    pro.clearWatchAcc = function(){
        this.watchAccFun && plus.accelerometer.clearWatch(this.watchAccFun);
    }

然后在初始化的時候默認打開方向監控

    var bvd = function(dom) {
        var that = this;
        $.ready(function() {
            //...
        })

        $.plusReady(function() {
            that.startWatchAcc();
        })

    }

再把橫向全屏改為，可雙向橫屏

真機調試看看

嘿嘿，我們再給全屏播放時添加一個鎖定按鈕，讓設備不監控 重力感應，也不響應視頻的點擊播放暫停事件

先做一個鎖定按鈕

當然，鎖定圖片，地址也改成用base64，最好也用js動態生成標簽

設置它的基本樣式，靠右，上下垂直居中，默認隱藏

        .lock {
            padding: .3rem;
            width: 3rem;
            height: 3rem;
            position: absolute;
            right: .5rem;
            top: 50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            visibility: hidden;
        }

好，我們來整理一下邏輯，

1）默認在mini播放時，lock隱藏
2）全屏播放時，lock顯示，但是也會跟著控制條 在4s內向右隱藏
3）全屏暫停時，lock也跟著控制條 一直顯示
4）點擊lock鎖定時，提示已鎖定，控制條立即隱藏，lock4s內向右隱藏，視頻點擊事件更換為顯示lock圖標，android返回鍵事件改為不做任何，關閉重力監控
5）點擊lock解鎖時，提示已解鎖，android返回鍵改為 切換為mini狀態，開啟重力監控

我擦，其實做起來還是挺郁悶的，主要是邏輯處理比較痛苦

0）添加一個向右移動的動畫，3s延遲后 1s內 執行完動畫

@keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}

webkit-keyframes lockhide {0% {transform: translate(0%,-50%);}100% {transform: translate(120%,-50%);}}

.lockhidden {
    animation: lockhide 1s 3s linear;
    -webkit-animation: lockhide 1s 3s linear;
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;
}

1）全屏時顯示lock

    pro.switch = function() {
        //...
        //全屏時 顯示鎖定 圖標
        this.vlock.style.visibility = this.isMax ? "visible" : "hidden";

    }

2)全屏播放時，lock顯示，但是也會跟著控制條 在4s內向右隱藏
我們在播放時添加lock的隱藏動畫，

3）全屏暫停時，lock也跟著控制條 一直顯示

4）點擊lock鎖定時，提示已鎖定，控制條立即隱藏，lock4s內向右隱藏，視頻點擊事件更換為顯示lock圖標，android返回鍵事件改為不做任何，關閉重力監控
5）點擊lock解鎖時，提示已解鎖，android返回鍵改為 切換為mini狀態，開啟重力監控

    //鎖定屏幕
    pro.lockScreen = function() {
        $.toast("鎖定屏幕");
        var that = this;
        //更換video點擊事件為 顯示 lock圖標，并保存 video之前的事件 
        this.videoTapFn = this.eve("tap", function() {
            that.lockT = setTimeout(function(){
                that.vlock.classList.add("lockhidden");
            },500);
                //重新開始播放樣式
            that.vlock.classList.remove("lockhidden");
            that.vlock.style.visibility = "visible";
        }, true);
        //隱藏控制條
        this.vC.style.visibility = "hidden";
        //給Lock圖標增加 隱藏樣式類
        this.vlock.classList.add("lockhidden");
        //鎖定屏幕時，不監控重力感應
        this.clearWatchAcc();
        //標識當前更改的Lock狀態
        this.isLock = true;

    }

    //解鎖屏幕
    pro.unlockScreen = function() {
        $.toast("解鎖屏幕");
        //替換回video之前的點擊事件
        this.eve("tap", this.videoTapFn, true);
        //給Lock圖標清楚 隱藏樣式類
        this.vlock.classList.remove("lockhidden");
        //不鎖定屏幕時，監控重力感應
        this.startWatchAcc();
        //標識當前更改的Lock狀態
        this.isLock = false;
    }

666）最后給我們親愛的lock圖標增加一枚撫摸事件，以及android返回鍵的事件更改

        //全屏 時 鎖定點擊事件
        this.vlock.addEventListener("tap", function() {
            if(that.isLock) {
                that.unlockScreen();
                return;
            }
            that.lockScreen();
        });

        this.oback = $.back;
        //監聽安卓返回鍵
        $.back = function(){
            if(that.isMax){
                if(!that.isLock){
                    //全屏狀態下 按下返回鍵 時，1s內不監控重力，防止返回Mini狀態時和重力感應并發事件
                    setTimeout(function(){
                        that.startWatchAcc();
                    },1000);
                    that.clearWatchAcc();
                    that.switch();
                }
                return;
            }
            that.oback();
        }
    }

好了！本文5+全屏demo 源碼地址

寫博客不易，但是那種分享的心情是很不錯的，何嘗不是另一種溫習和進步呢？

謝謝各位。

本文相關文章：H5打造屬于自己的視頻播放器 專欄