H5打造屬于自己的視頻播放器（JS篇2）

bang590 發(fā)布于2019-08-01 15:37 / 3254人閱讀

摘要：回顧算了不回顧了直接搞起，打開(kāi)中寫(xiě)的播放視頻播放按鈕隱藏視頻開(kāi)始播放當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在中我們就已經(jīng)實(shí)現(xiàn)。

回顧

算了不回顧了
直接搞起，打開(kāi)JS1中寫(xiě)的bvd.js

播放視頻

播放按鈕隱藏

視頻開(kāi)始播放
當(dāng)點(diǎn)擊播放按鈕的時(shí)候，播放按鈕將會(huì)隱藏，播放視頻，這個(gè)不難，在JS1中我們就已經(jīng)實(shí)現(xiàn)。但我們改變一下思維，給視頻添加點(diǎn)擊tap事件，使視頻播放，再觸發(fā)播放事件，從而讓播放按鈕隱藏

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

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

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

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

定時(shí)器

css3 動(dòng)畫(huà)幀

在這里我們2種結(jié)合起來(lái)使用

首先我們先定義好一組動(dòng)畫(huà)

@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秒內(nèi)1=>0，ease-in 就是由慢到快的過(guò)度效果。有不懂css動(dòng)畫(huà)可以問(wèn)問(wèn)度娘哦
然后我們給視頻開(kāi)始播放事件的時(shí)候給控制條添加vhidden樣式類

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

測(cè)試效果，果然3.5s內(nèi)，控制條慢慢透明，問(wèn)題是3.5s后，透明度又回到了1，這里我講解一下，是因?yàn)閯?dòng)畫(huà)幀默認(rèn)是回彈的，我們可以加個(gè)樣式

.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 用來(lái)定義元素在動(dòng)畫(huà)結(jié)束后的樣子。

animation-fill-mode 的默認(rèn)值是 none，也就是在動(dòng)畫(huà)結(jié)束之后不做任何改動(dòng)，如果把a(bǔ)nimation-fill-mode 改成 forwards 則動(dòng)畫(huà)結(jié)束后元素的樣式會(huì)變成動(dòng)畫(huà)最后一個(gè)關(guān)鍵幀所規(guī)定的樣式。

加上這個(gè)樣式后，果然3.5s后，動(dòng)畫(huà)不再回彈了，但是這里要留意一下，控制條并不是不在了而是透明了，如果這時(shí)我們有寫(xiě)控制條的點(diǎn)擊時(shí)間，那么在控制條位置點(diǎn)擊，還是會(huì)觸發(fā)事件，所以呢，我們還可以寫(xiě)上一段setTimeout來(lái)，讓控制條3.5s后隱藏，這個(gè)大家可以自行取舍

//視頻播放事件
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);
})

為什么動(dòng)畫(huà)過(guò)程是3.5s，然而js是是3.4s后執(zhí)行，這里只是在未寫(xiě)animation-fill-mode:forwards的情況下做個(gè)保險(xiǎn)

正在播放中

嘿嘿，視頻可以播放啦！那么現(xiàn)在我們?cè)摽紤]一下播放中有哪些事要做呢？

1. 控制條進(jìn)度條慢慢增長(zhǎng)

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

我們先在獲取視頻元數(shù)據(jù)事件中，把視頻的長(zhǎng)度給拿下來(lái)

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

再?gòu)囊曨l播放進(jìn)度更新事件中計(jì)算比例，設(shè)置進(jìn)度條的寬度

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

可以看到我們的進(jìn)度條君越來(lái)越膨脹了。

2. 當(dāng)前播放時(shí)間變化

同時(shí)，我們的當(dāng)前播放時(shí)間顯示也在timeupdate事件中設(shè)置

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

暫停 or 停止

當(dāng)我們點(diǎn)擊視頻時(shí)，如果是暫停，那就開(kāi)始播放，并觸發(fā)播放事件，反之視頻在播放中，點(diǎn)擊視頻就會(huì)暫停，并觸發(fā)暫停事件。

0. 時(shí)間定格

啦啦啦，暫停播放，timeupdate事件自然就不觸發(fā)啦，所以進(jìn)度條和當(dāng)前播放時(shí)間就不會(huì)變啦。

1. 播放按鈕顯示

在暫停的時(shí)候，顯示出按鈕就行啦

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

2. 下方控制條顯示

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

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

這樣寫(xiě)看樣子是沒(méi)錯(cuò)啦，但是，如果大家在之前隱藏控制條的時(shí)候?qū)懥藄etTimeout的話，這個(gè)時(shí)候就要清除掉哦。

//暫停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);
});

快進(jìn)快退

一個(gè)叼叼噠的小視頻播放器怎么可能少的了可進(jìn)可退能屈能伸呢？

來(lái)，我們先為video添加左滑右滑事件

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

可能在電腦上調(diào)試會(huì)直接進(jìn)度變0，一開(kāi)始我也納悶?zāi)兀髞?lái)發(fā)現(xiàn)手機(jī)上webview中好像是可行的。

關(guān)于 進(jìn)度條拖動(dòng)改變視頻進(jìn)度 我暫時(shí)不打算寫(xiě)，因?yàn)槲疫€沒(méi)寫(xiě)。

全屏播放

可能大家會(huì)比較關(guān)注這個(gè)吧：

ios端：去除video標(biāo)簽webkit-playsinline屬性即可，因?yàn)閕os對(duì)h5的video標(biāo)簽支持還是比較不錯(cuò)的

//調(diào)用原生方式 全屏播放
pro.nativeMax = function(){
    if(!window.plus){
        //非html5+環(huán)境
        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中添加點(diǎn)擊全屏事件

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

這樣做有點(diǎn)雞肋啊，就不能來(lái)點(diǎn)通用的？

確實(shí)這個(gè)問(wèn)題我想了一晚上，決定再拿點(diǎn)干貨來(lái)。

先給個(gè)狀態(tài)，默認(rèn)為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();
        //當(dāng)前播放模式 false 為 mini播放
        that.isMax = false;
    })
}

//記錄信息
pro.initInfo = function() {
    var that = this;
    //在onload狀態(tài)下，offsetHeight才會(huì)獲取到正確的值
    window.onload = function(){
        that.miniInfo = {//mini狀態(tài)時(shí)的樣式
            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狀態(tài)時(shí)的樣式
            width: h + "px",
            height: w + "px",
            position: "fixed",
            transform: "translate(-" + cha + "px," + cha + "px) rotate(90deg)"
        }
    }
    
    
}

//全屏 mini 兩種模式切換
pro.switch = function() {
    var vR = this.vRoom;
    //獲取需要轉(zhuǎn)換的樣式信息
    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();
});

瞧一瞧拉，看一看拉

看起來(lái)感覺(jué)很不錯(cuò)呢，利用css3的位移和旋轉(zhuǎn)，讓視頻全屏在了屏幕前，但是問(wèn)題也隨之而來(lái)了

播放按鈕以及控制條在全屏下似乎隱藏了，其實(shí)是video標(biāo)簽蓋在了父元素之上，我們作出相應(yīng)的調(diào)整

css

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

js
max配置當(dāng)中，設(shè)置zIndex值

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

橫向全屏后，左右滑動(dòng)事件沒(méi)有跟著方向改變

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

        });

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

這時(shí)候怎么辦呢，不要方

手勢(shì)滑動(dòng)事件

我們先給video注冊(cè)一個(gè)事件列表

    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事件添加一個(gè)代理來(lái)刪除添加事件，isF就是在新增這個(gè)事件是否刪除之前的這個(gè)相同的事件，因?yàn)樘砑邮录媚涿瘮?shù)的話，是不能刪除的，這樣設(shè)置一個(gè)代理就可以把動(dòng)態(tài)添加的事件記錄在events里面，便于操作

這時(shí)我們補(bǔ)上修改當(dāng)前播放進(jìn)度和音量的功能

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

再通過(guò)代理給video添加左右上下滑動(dòng)的事件

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

ok，四個(gè)方向的滑動(dòng)事件已經(jīng)添加過(guò)去了，但這是mini模式播放時(shí)的事件，在全屏播放下，四個(gè)方向事件并沒(méi)有跟著video元素方向的改變而改變，這下需要再通過(guò)最最最笨的方式判斷是否全屏從而觸發(fā)的事件

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

怎么樣，雖然看起來(lái)有點(diǎn)stupid，但是很實(shí)用呢

5+客戶端全屏解決方案

雖說(shuō)在5+客戶端，android可以調(diào)用原生的方式播放，但還是差強(qiáng)人意，我們可以再來(lái)看一套解決方案

初始化時(shí)，記錄mini時(shí)的樣式，全屏?xí)r，通過(guò)修改視頻寬度為屏幕高度，視頻高度修改為視頻寬度，再利用5+的屏幕旋轉(zhuǎn)，設(shè)置全屏，隱藏狀態(tài)欄

0)去除手勢(shì)事件判斷

因?yàn)楝F(xiàn)在是準(zhǔn)備改變移動(dòng)設(shè)備的方向，所以，手勢(shì)方向會(huì)跟著設(shè)備方向改變

1)去除 css3 旋轉(zhuǎn)以及位移

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

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

        }

    }

2）該用5+的設(shè)置全屏以及隱藏狀態(tài)欄

    //全屏 mini 兩種模式切換
    pro.switch = function() {
        var vR = this.vRoom;
        //獲取需要轉(zhuǎn)換的樣式信息
        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）全屏狀態(tài)下，android端返回鍵，觸發(fā)退出全屏

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

效果圖

5+重力感應(yīng)切換全屏

嘿嘿，一個(gè)在移動(dòng)端的播放器怎么能少得了自動(dòng)切換橫豎屏呢？
在個(gè)小節(jié)當(dāng)中就講了如何手動(dòng)切換全屏，接下來(lái)重力感應(yīng)切換橫屏，需要用到5+的API Accelerometer 加速度感應(yīng)

簡(jiǎn)單說(shuō)：重力加速度感應(yīng)可以想象成一個(gè)小球在坐標(biāo)系中
三個(gè)方向上的加速度。永遠(yuǎn)以手機(jī)屏幕為準(zhǔn)

啥是加速度？額，就是物理書(shū)上的

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

啥是xyz軸？額，就是高數(shù)書(shū)上的

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

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

x,y軸變化：

手機(jī)屏幕向上水平放置時(shí)： (x,y,z) = (0, 0, -9.81)
當(dāng)手機(jī)頂部抬起時(shí)： y減小，且為負(fù)值
當(dāng)手機(jī)底部抬起時(shí)： y增加，且為正值
當(dāng)手機(jī)右側(cè)抬起時(shí)： x減小，且為負(fù)值
當(dāng)手機(jī)左側(cè)抬起時(shí)： x增加，且為正值

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

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

ok，我們新增2個(gè)方法，用于打開(kāi)和關(guān)閉設(shè)備監(jiān)控

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

然后在初始化的時(shí)候默認(rèn)打開(kāi)方向監(jiān)控

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

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

    }

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

真機(jī)調(diào)試看看

嘿嘿，我們?cè)俳o全屏播放時(shí)添加一個(gè)鎖定按鈕，讓設(shè)備不監(jiān)控重力感應(yīng)，也不響應(yīng)視頻的點(diǎn)擊播放暫停事件

先做一個(gè)鎖定按鈕

當(dāng)然，鎖定圖片，地址也改成用base64，最好也用js動(dòng)態(tài)生成標(biāo)簽

設(shè)置它的基本樣式，靠右，上下垂直居中，默認(rèn)隱藏

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

好，我們來(lái)整理一下邏輯，

1）默認(rèn)在mini播放時(shí)，lock隱藏
2）全屏播放時(shí)，lock顯示，但是也會(huì)跟著控制條在4s內(nèi)向右隱藏
3）全屏?xí)和r(shí)，lock也跟著控制條一直顯示
4）點(diǎn)擊lock鎖定時(shí)，提示已鎖定，控制條立即隱藏，lock4s內(nèi)向右隱藏，視頻點(diǎn)擊事件更換為顯示lock圖標(biāo)，android返回鍵事件改為不做任何，關(guān)閉重力監(jiān)控
5）點(diǎn)擊lock解鎖時(shí)，提示已解鎖，android返回鍵改為切換為mini狀態(tài)，開(kāi)啟重力監(jiān)控

我擦，其實(shí)做起來(lái)還是挺郁悶的，主要是邏輯處理比較痛苦

0）添加一個(gè)向右移動(dòng)的動(dòng)畫(huà)，3s延遲后 1s內(nèi) 執(zhí)行完動(dòng)畫(huà)

@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）全屏?xí)r顯示lock

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

    }

2)全屏播放時(shí)，lock顯示，但是也會(huì)跟著控制條在4s內(nèi)向右隱藏
我們?cè)诓シ艜r(shí)添加lock的隱藏動(dòng)畫(huà)，

3）全屏?xí)和r(shí)，lock也跟著控制條一直顯示

4）點(diǎn)擊lock鎖定時(shí)，提示已鎖定，控制條立即隱藏，lock4s內(nèi)向右隱藏，視頻點(diǎn)擊事件更換為顯示lock圖標(biāo)，android返回鍵事件改為不做任何，關(guān)閉重力監(jiān)控
5）點(diǎn)擊lock解鎖時(shí)，提示已解鎖，android返回鍵改為切換為mini狀態(tài)，開(kāi)啟重力監(jiān)控

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

    }

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

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

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

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

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

寫(xiě)博客不易，但是那種分享的心情是很不錯(cuò)的，何嘗不是另一種溫習(xí)和進(jìn)步呢？

謝謝各位。

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

云服務(wù)器 GPU云服務(wù)器 h5js播放視頻 h5視頻播放器 squid打造自己的cdn 打造自己的云服務(wù)器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/50003.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

bang590

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

SSM實(shí)戰(zhàn)項(xiàng)目：人事管理系統(tǒng)（藍(lán)色版）【附源代碼】

閱讀 2649·2021-11-22 09:34
Centos8 部署 ElasticSearch 集群并搭建 ELK，基于Logstash同步MyS

閱讀 1044·2021-11-19 11:34
華為注資3億元加碼云計(jì)算領(lǐng)域_云資訊

閱讀 2870·2021-10-14 09:42
什么云主機(jī)便宜-國(guó)內(nèi)便宜的云主機(jī)哪些人用？

閱讀 1584·2021-09-22 15:27
（快）開(kāi)學(xué)了，各大編程語(yǔ)言在群里吵翻了天！

閱讀 2439·2021-09-07 09:59
Vultr：裸金屬服務(wù)器，$0.275/H，1.9TB SSD/10T流量/10G帶寬，洛杉磯/日本

閱讀 1804·2021-08-27 13:13
前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

閱讀 3489·2019-08-30 11:21
vs code 插件折騰記（二）

閱讀 827·2019-08-29 18:35

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

H5打造屬于自己的視頻播放器（JS篇2）

相關(guān)文章

**H5打造屬于自己的視頻播放器（邏輯篇）**

**H5打造屬于自己的視頻播放器（邏輯篇）**

**H5打造屬于自己的視頻播放器（HTML篇）**

**H5打造屬于自己的視頻播放器（HTML篇）**

**H5打造屬于自己的視頻播放器（HTML篇）**

發(fā)表評(píng)論

0條評(píng)論

bang590

男|高級(jí)講師

TA的文章

SSM實(shí)戰(zhàn)項(xiàng)目：人事管理系統(tǒng)（藍(lán)色版）【附源代碼】

Centos8 部署 ElasticSearch 集群并搭建 ELK，基于Logstash同步MyS

華為注資3億元加碼云計(jì)算領(lǐng)域_云資訊

什么云主機(jī)便宜-國(guó)內(nèi)便宜的云主機(jī)哪些人用？

（快）開(kāi)學(xué)了，各大編程語(yǔ)言在群里吵翻了天！

Vultr：裸金屬服務(wù)器，$0.275/H，1.9TB SSD/10T流量/10G帶寬，洛杉磯/日本

前端培訓(xùn)-中級(jí)階段（8）- jQuery元素屬性樣式操作（2019-08-01期）

vs code 插件折騰記（二）

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

H5打造屬于自己的視頻播放器（JS篇2）

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！