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

資訊專欄INFORMATION COLUMN

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

NervosNetwork / 2041人閱讀

前言

眾所周知，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

搬好凳子看HTML

首先我們?cè)贖B下創(chuàng)建一個(gè)新的app項(xiàng)目，名稱為 欠債

新建一個(gè)video.html

webkit-playsinline : 在ios中，加入此屬性，可以關(guān)閉自動(dòng)全屏播放
object-fit:fill : 視頻充滿video容器的大小
詳細(xì)理由請(qǐng)看參考文獻(xiàn)2or3

在此我們向項(xiàng)目里放置一個(gè)mp4格式的視頻,視頻內(nèi)容不限,可以是小動(dòng)畫(huà),也可以是

ps:要在meta中加上，否則視頻會(huì)擴(kuò)充變形哦

OK,現(xiàn)在布局已經(jīng)完成,一個(gè)視頻已經(jīng)在頁(yè)面中了

旁白：尼瑪，點(diǎn)了沒(méi)反應(yīng)，那這怎么播放？

樓主：你們這群家伙看別的小視頻等個(gè)1小時(shí)都行。。。

旁白：一個(gè)簡(jiǎn)單的播放器，至少要有 暫停/播放，進(jìn)度條，視頻時(shí)長(zhǎng)，全屏等控件吧

樓主：來(lái)來(lái)來(lái)，不要急，先來(lái)個(gè)播放按鈕寫在video標(biāo)簽后面

寫好樣式、

        .bad-video {
            position: relative;
            overflow: hidden;
            background-color: #CCCCCC;
        }
        
        .bad-video .vplay{
            position: absolute;
            width: 15%;
            z-index: 99;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

樓主：當(dāng)當(dāng)當(dāng)

再在后面加一個(gè)控制條

            
            

                

                    

                        

                    

                

                
00:00/00:00

                
全屏

            
.bad-video .controls {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.8rem;
    color: white;
    display: block;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, .55);
    display: -webkit-flex;
    display: flex;
}

.bad-video .controls>* {
    flex: 1;
}

.bad-video .controls>*:nth-child(1) {
    flex: 6;
}

.bad-video .controls>*:nth-child(2) {
    flex: 2;
    text-align: center;
}

.bad-video .controls .progressBar {
    margin: .75rem 5%;
    position: relative;
    width: 90%;
    height: .5rem;
    background-color: rgba(200, 200, 200, .55);
    border-radius: 10px;
}

.bad-video .controls .timeBar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: rgba(99, 110, 225, .85);
    border-radius: 10px;
}

總算有個(gè)看起來(lái)像樣的了

旁白：樓主，可是還是不能播放啊
樓主：叫你別急，要不你先去擼一把，我寫好了文字@你
旁白：好啊，早說(shuō)嘛，我先走了，記得@我
樓主：你走，省的我精神分裂碼兩個(gè)人的字

好，現(xiàn)在Html元素已經(jīng)基本上弄好啦，看起來(lái)不是那么low了

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

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

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

相關(guān)文章

  • 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...

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

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

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

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

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

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

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

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

0條評(píng)論

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