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

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

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

回顧

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

播放視頻

播放按鈕隱藏

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

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";
    })
    
    
    //獲取到元數(shù)據(jù)
    this.video.addEventListener("loadedmetadata",function(){
        that.vC.querySelector(".duration").innerHTML = stom(this.duration);
    });
}

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

定時器

css3 動畫幀

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

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

@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 就是由慢到快的過度效果。有不懂css動畫可以問問度娘哦
然后我們給視頻開始播放事件的時候給控制條添加vhidden樣式類

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

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

.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 用來定義元素在動畫結(jié)束后的樣子。

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

加上這個樣式后，果然3.5s后，動畫不再回彈了，但是這里要留意一下，控制條并不是不在了而是透明了，如果這時我們有寫控制條的點擊時間，那么在控制條位置點擊，還是會觸發(fā)事件，所以呢，我們還可以寫上一段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后執(zhí)行，這里只是在未寫animation-fill-mode:forwards的情況下做個保險

正在播放中

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

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

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

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

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

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

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

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

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

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

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

暫停 or 停止

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

0. 時間定格

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

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

這樣寫看樣子是沒錯啦，但是，如果大家在之前隱藏控制條的時候?qū)懥藄etTimeout的話，這個時候就要清除掉哦。

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

可能在電腦上調(diào)試會直接進度變0，一開始我也納悶?zāi)?，后來發(fā)現(xiàn)手機上webview中好像是可行的。

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

全屏播放

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

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

//調(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中添加點擊全屏事件

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

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

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

先給個狀態(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才會獲取到正確的值
    window.onload = function(){
        that.miniInfo = {//mini狀態(tài)時的樣式
            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)時的樣式
            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();
});

瞧一瞧拉，看一看拉

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

播放按鈕以及控制條在全屏下似乎隱藏了，其實是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)時的樣式
                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就是在新增這個事件是否刪除之前的這個相同的事件，因為添加事件用匿名函數(shù)的話，是不能刪除的，這樣設(shè)置一個代理就可以把動態(tài)添加的事件記錄在events里面，便于操作

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

    //跳轉(zhuǎn)視頻進度 單位 秒
    pro.setCurrentTime = function(t){
        this.video.currentTime += t;
    }
    //設(shè)置音量大小 單位 百分比 如 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，四個方向的滑動事件已經(jīng)添加過去了，但這是mini模式播放時的事件，在全屏播放下，四個方向事件并沒有跟著video元素方向的改變而改變，這下需要再通過最最最笨的方式判斷是否全屏從而觸發(fā)的事件

        //視頻手勢右滑動事件
        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+客戶端全屏解決方案

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

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

0)去除手勢事件判斷

因為現(xiàn)在是準(zhǔn)備改變移動設(shè)備的方向，所以，手勢方向會跟著設(shè)備方向改變

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

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

            that.maxInfo = { //max狀態(tài)時的樣式
                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)聽安卓返回鍵
        $.back = function() {
            if(that.isMax) {
                that.switch();
                return;
            }
            that.oback();
        }
}

效果圖

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

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

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

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

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

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

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

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

x,y軸變化：

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

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

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

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

    //開啟方向感應(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) {
                //出錯了大不了 不自動旋轉(zhuǎn)唄  讓它手動 切換
                console.log("Acceleration error: " + e.message);
                that.clearWatchAcc();
            },{
                frequency:1200
            });
    }
    //關(guān)閉方向感應(yīng)
    pro.clearWatchAcc = function(){
        this.watchAccFun && plus.accelerometer.clearWatch(this.watchAccFun);
    }

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

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

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

    }

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

真機調(diào)試看看

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

先做一個鎖定按鈕

當(dāng)然，鎖定圖片，地址也改成用base64，最好也用js動態(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;
        }

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

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

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

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

@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)全屏播放時，lock顯示，但是也會跟著控制條在4s內(nèi)向右隱藏
我們在播放時添加lock的隱藏動畫，

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

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

    //鎖定屏幕
    pro.lockScreen = function() {
        $.toast("鎖定屏幕");
        var that = this;
        //更換video點擊事件為 顯示 lock圖標(biāo)，并保存 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圖標(biāo)增加 隱藏樣式類
        this.vlock.classList.add("lockhidden");
        //鎖定屏幕時，不監(jiān)控重力感應(yīng)
        this.clearWatchAcc();
        //標(biāo)識當(dāng)前更改的Lock狀態(tài)
        this.isLock = true;

    }

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

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

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

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

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

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

謝謝各位。

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50003.html

發(fā)表評論

登陸后可評論

0條評論

bang590

男|高級講師

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

TA的文章

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

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

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

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

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

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

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

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

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

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

發(fā)表評論

0條評論

bang590

男|高級講師

TA的文章

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

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

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

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

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

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

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

vs code 插件折騰記（二）

最新活動

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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