H5打造屬於本身的視頻播放器（邏輯篇）

回顧

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）