国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5打造屬于自己的視頻播放器(JS篇1)

szysky / 2756人閱讀

摘要:我們給視頻添加一個(gè)獲取到元數(shù)據(jù)事件給播放按鈕圖片添加事件獲取到元數(shù)據(jù)果然出現(xiàn)了視頻的長(zhǎng)度,可是這是按秒計(jì)算的啊。。。

回顧

1)H5打造屬于自己的視頻播放器(HTML篇)
2)H5打造屬于自己的視頻播放器(邏輯篇)

前言

在HTML篇當(dāng)中我們寫(xiě)好了樣式,今天我們?yōu)関ideo新增一個(gè)樣式

.bad-video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit:fill;
}

高,寬,內(nèi)容,都充父元素

乳此一來(lái),我們的HMTL元素內(nèi)容為

        
00:00/00:00
全屏
吹著口哨寫(xiě)JS

幸好我們?cè)趯?xiě)JS之前,先整理好了邏輯思緒,并寫(xiě)好了筆記H5打造屬于自己的視頻播放器(邏輯篇)

以下文章將要用到 號(hào)稱 最接近原生APP體驗(yàn)的高性能前端框架MUI

首先,讓我們來(lái)新建一個(gè)js文件,比如,bvd.js 并注冊(cè)一下全局的一個(gè)入口

(function($){
    var bvd = function(dom) {
        this.dom = document.querySelector(dom || "video");
    }
    
    var pro = bvd.prototype;
    
    pro.test = function(){
        console.log(this.dom)
    }
    
    
    var nv = null;
    $.bvd = function(dom) {
        return nv || (nv = new bvd(dom));
    }
}(mui))

讓我們?cè)趘ideo.html引入bvd.js 并且來(lái)測(cè)試一下吧!



        

看來(lái)是ok的,與此同時(shí),為了html頁(yè)的簡(jiǎn)潔美觀,我們將播放按鈕控制條用JS動(dòng)態(tài)生成

(function($){
    var bvd = function(dom) {
        var that = this;
        $.ready(function(){
            //獲取視頻元素
            that.video = document.querySelector(dom || "video");
            //獲取視頻父元素
            that.vRoom = that.video.parentNode;
            //元素初始化
            that.initEm();
        })
    }
    
    var pro = bvd.prototype;
    
    pro.initEm = function(){
        //先添加播放按鈕
        this.vimg = document.createElement("img");
        this.vimg.src = "img/play.png";
        this.vimg.className = "vplay";
        this.vRoom.appendChild(this.vimg);
        
    }
    
    
    var nv = null;
    $.bvd = function(dom) {
        return nv || (nv = new bvd(dom));
    }
}(mui))

這里有個(gè)小細(xì)節(jié),如果img的src設(shè)置為本地資源的話,那么以后使用會(huì)出現(xiàn)很多問(wèn)題,比如,頁(yè)面層級(jí)發(fā)生變化時(shí),你要去修改bvd.js,以免夜長(zhǎng)夢(mèng)多,我們將圖片轉(zhuǎn)為base64

再添加控制條

pro.initEm = function(){
        //先添加播放按鈕
        this.vimg = document.createElement("img");
        this.vimg.src = "data:image/png;base64,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";
        this.vimg.className = "vplay";
        this.vRoom.appendChild(this.vimg);
        
        //添加控制條
        this.vC = document.createElement("div");
        this.vC.classList.add("controls");
        this.vC.innerHTML = "
00:00/00:00
全屏
"; this.vRoom.appendChild(this.vC); }

再把 video.html中的 播放按鈕 和 控制條 注釋,看看我們寫(xiě)的代碼效果如何


大家可以看到,紅色是我們注釋的,綠色的是我們js生成的,奈斯

開(kāi)始播放

真正開(kāi)始我們js篇的第一步啦

初始化事件,先寫(xiě)個(gè)播放按鈕播放視頻事件測(cè)試一下

            //元素初始化
            that.initEm();
            //事件初始化
            that.initEvent();

----------

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

tap事件,是MUI封裝好的一個(gè)適合移動(dòng)端點(diǎn)擊的事件哦,移動(dòng)端click事件延遲300ms,建議大家多用tap,關(guān)于tap事件是如何模擬的,請(qǐng)看HTML5觸摸事件演化tap事件介紹

喲西,視頻開(kāi)始播放拉!!!

回顧一下H5打造屬于自己的視頻播放器(邏輯篇)
溫習(xí)一下移動(dòng)端HTML5

初始化

1)封面 在這里我沒(méi)啥好圖,就不設(shè)置了,大家可以試試在video標(biāo)簽加入屬性 poster="圖片地址"
2)獲取視頻長(zhǎng)度,ok,我們給視頻添加一個(gè)"loadedmetadata"獲取到元數(shù)據(jù)事件,什么事元數(shù)據(jù)?

舉個(gè)栗子:一部電影30個(gè)G,名字叫《我將帶頭沖鋒》,視頻長(zhǎng)300小時(shí)

大小,名稱,長(zhǎng)度,等這些應(yīng)該就算是元數(shù)據(jù)了。

我們給視頻添加一個(gè)獲取到元數(shù)據(jù)事件

    pro.initEvent = function(){
        var that = this;
        //給播放按鈕圖片添加事件
        this.vimg.addEventListener("tap",function(){
            this.style.display = "none";
            that.video.play();
        })
        
        //獲取到元數(shù)據(jù)
        this.video.addEventListener("loadedmetadata",function(){
            that.vC.querySelector(".duration").innerHTML = this.duration;
        });
    }

果然出現(xiàn)了視頻的長(zhǎng)度,可是這是按秒計(jì)算的啊。。。

這時(shí)我們可以寫(xiě)一個(gè)時(shí)間轉(zhuǎn)換的函數(shù)

    function stom(t) {
        var m = Math.floor(t / 60);
        m < 10 && (m = "0" + m);
        return m + ":" + (t % 60 / 100).toFixed(2).slice(-2);
    }

轉(zhuǎn)換一下

可以,這很清真,今天我們暫時(shí)講到這,消化消息,也讓樓主整頓一下思緒

本章節(jié)JS1源碼放在這里

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

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/11017.html

相關(guān)文章

  • H5打造屬于自己視頻放器(邏輯

    摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來(lái),接下來(lái)應(yīng)該是篇了,可是在寫(xiě)之前有必要先整理一下思緒,盲目亂寫(xiě)是不對(duì)的,喝杯茶,撩撩妹,生活多美妙,寫(xiě)起代碼來(lái)自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來(lái),接下來(lái)應(yīng)該是JS篇了,可是在寫(xiě)之前有必要先整理一下思緒,盲目亂寫(xiě)是不對(duì)的,喝杯茶,...

    hover_lew 評(píng)論0 收藏0
  • H5打造屬于自己視頻放器(邏輯

    摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來(lái),接下來(lái)應(yīng)該是篇了,可是在寫(xiě)之前有必要先整理一下思緒,盲目亂寫(xiě)是不對(duì)的,喝杯茶,撩撩妹,生活多美妙,寫(xiě)起代碼來(lái)自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來(lái),接下來(lái)應(yīng)該是JS篇了,可是在寫(xiě)之前有必要先整理一下思緒,盲目亂寫(xiě)是不對(duì)的,喝杯茶,...

    Big_fat_cat 評(píng)論0 收藏0
  • H5打造屬于自己視頻放器(HTML

    前言 眾所周知,16年無(wú)疑是直播行業(yè)的春天,同時(shí)也是H5的一次高潮。so,到現(xiàn)在用H5技術(shù)在移動(dòng)端做網(wǎng)頁(yè)直播也是見(jiàn)怪不怪了,但是!!!今天我們的主角是webApp下播放視頻參考文獻(xiàn):1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實(shí)現(xiàn)方案3)移動(dòng)端HTML5視頻播放優(yōu)化實(shí)踐 搬好凳子看HTML 首先我們?cè)贖B下創(chuàng)建一個(gè)新的app項(xiàng)目,名稱為 欠債 sh...

    nevermind 評(píng)論0 收藏0
  • H5打造屬于自己視頻放器(HTML

    前言 眾所周知,16年無(wú)疑是直播行業(yè)的春天,同時(shí)也是H5的一次高潮。so,到現(xiàn)在用H5技術(shù)在移動(dòng)端做網(wǎng)頁(yè)直播也是見(jiàn)怪不怪了,但是!!!今天我們的主角是webApp下播放視頻參考文獻(xiàn):1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實(shí)現(xiàn)方案3)移動(dòng)端HTML5視頻播放優(yōu)化實(shí)踐 搬好凳子看HTML 首先我們?cè)贖B下創(chuàng)建一個(gè)新的app項(xiàng)目,名稱為 欠債 sh...

    Astrian 評(píng)論0 收藏0
  • H5打造屬于自己視頻放器(HTML

    前言 眾所周知,16年無(wú)疑是直播行業(yè)的春天,同時(shí)也是H5的一次高潮。so,到現(xiàn)在用H5技術(shù)在移動(dòng)端做網(wǎng)頁(yè)直播也是見(jiàn)怪不怪了,但是!!!今天我們的主角是webApp下播放視頻參考文獻(xiàn):1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實(shí)現(xiàn)方案3)移動(dòng)端HTML5視頻播放優(yōu)化實(shí)踐 搬好凳子看HTML 首先我們?cè)贖B下創(chuàng)建一個(gè)新的app項(xiàng)目,名稱為 欠債 sh...

    NervosNetwork 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<