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

nevermind 發布于2019-08-29 11:07 / 3589人閱讀

前言

眾所周知，16年無疑是直播行業的春天，同時也是H5的一次高潮。
so，到現在用H5技術在移動端做網頁直播也是見怪不怪了，但是！！！
今天我們的主角是webApp下播放視頻
參考文獻：
1)HTML5+CSS3+JQuery打造自定義視頻播放器
2)mui Html5 Video 實現方案
3)移動端HTML5

搬好凳子看HTML

首先我們在HB下創建一個新的app項目，名稱為欠債

新建一個video.html

webkit-playsinline : 在ios中，加入此屬性，可以關閉自動全屏播放
object-fit:fill : 視頻充滿video容器的大小
詳細理由請看參考文獻2or3

在此我們向項目里放置一個mp4格式的視頻,視頻內容不限,可以是小動畫,也可以是

ps:要在meta中加上，否則視頻會擴充變形哦

OK,現在布局已經完成,一個視頻已經在頁面中了

旁白：尼瑪，點了沒反應，那這怎么播放？

樓主：你們這群家伙看別的小視頻等個1小時都行。。。

旁白：一個簡單的播放器，至少要有暫停/播放，進度條，視頻時長，全屏等控件吧

樓主：來來來，不要急，先來個播放按鈕寫在video標簽后面

寫好樣式、

        .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%);
        }

樓主：當當當

再在后面加一個控制條

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

總算有個看起來像樣的了

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

好，現在Html元素已經基本上弄好啦，看起來不是那么low了

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

GPU云服務器云服務器 h5視頻播放器 squid打造自己的cdn 打造自己的云服務器 h5視頻播放花屏

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111438.html

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

前言眾所周知，16年無疑是直播行業的春天，同時也是H5的一次高潮。so，到現在用H5技術在移動端做網頁直播也是見怪不怪了，但是！！！今天我們的主角是webApp下播放視頻參考文獻：1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實現方案3)移動端HTML5視頻播放優化實踐搬好凳子看HTML 首先我們在HB下創建一個新的app項目，名稱為欠債 sh...

Astrian 2019-08-21 14:16 評論0 收藏0
H5打造屬于自己的視頻播放器（HTML篇）

前言眾所周知，16年無疑是直播行業的春天，同時也是H5的一次高潮。so，到現在用H5技術在移動端做網頁直播也是見怪不怪了，但是！！！今天我們的主角是webApp下播放視頻參考文獻：1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實現方案3)移動端HTML5視頻播放優化實踐搬好凳子看HTML 首先我們在HB下創建一個新的app項目，名稱為欠債 sh...

NervosNetwork 2019-08-01 15:35 評論0 收藏0
H5打造屬于自己的視頻播放器（邏輯篇）

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

hover_lew 2019-08-20 10:17 評論0 收藏0
H5打造屬于自己的視頻播放器（邏輯篇）

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

Big_fat_cat 2019-08-01 15:34 評論0 收藏0