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

Big_fat_cat 發布于2019-08-01 15:34 / 1964人閱讀

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

回顧

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

初始化

1）設置好封面，一個好的小視頻，自然封面非常給力，讓人忍不住點擊
下面就是一些不錯的栗子

2）獲取視頻長度，一個友好的播放器，會給用戶顯示這個視頻總共多少分鐘

當然，您可以不用標注的太明顯，但不能沒有哦

播放

當點下播放的時候，世界將會改變。確實

1）播放按鈕隱藏
2）下方控制條漸漸隱藏
3）視頻開始播放

ps：排名不分先后你321倒過來也行

播放中

在播放中會發生什么變化呢？

1）控制條進度條慢慢增長
2）當前播放時間變化

暫停 or 停止

在播放當中按暫停或者視頻播放完畢時

0）時間定格（所指的是 video ui都靜止，但不包括廣告喲，哈哈，您可以嘗試在播放按鈕上放置一些誘人的廣告）

1）播放按鈕顯示
2）下方控制條顯示

總結

1）在點擊播放時，是播放按鈕的點擊事件，觸發視頻播放
而在點擊暫停時，是視頻的點擊事件，觸發按鈕顯示

2）在點擊播放后，下方控制條漸漸隱藏時，卻還沒有完全隱藏的時候
但又點擊了暫停，這時需要清除控制條的隱藏的狀態，如下圖

靈魂畫師來襲

3）哎呀我跌倒了，沒有三五八萬起不來

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

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

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

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

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

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

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

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

nevermind 2019-08-29 11:07 評論0 收藏0
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