【html5多媒體】自定義播放器(彈幕,水印,甚至在視訊開頭新增封面)

碼農下的天橋發表於2015-09-23

前言

想必很多時候各位同仁都用到了video標籤這個傢伙,然後各種各樣自定義樣式都會出來。。
但是通常通用性不會好到什麼地方去。因為各個平臺【安卓,ios,pc】及各個版本的瀏覽器對video的實現,樣式及控制欄都會有所不同,要統一樣式簡直難上加難。
這裡提供一種思路如何統一如何定製播放器甚至在播放視訊前面加十幾秒廣告,再加十幾秒大頭像還有彈幕還有水印都綽綽有餘,但這算是一個hack的方法,思路就是,採用原生video播放的時候,隱藏video,每一幀觸發事件時候將video的畫面繪製到一個canvas上面去,就是說,基本上使用者看到的畫面就是我們繪製的canvas,當然,用這種方法的話,所有元件,譬如,進度條,音量控制,前進快退,載入特效等等都必須自己控制,難度也是有一定的。因為這個外掛相對而言比較複雜,需要一系列的鋪墊。下面有一系列的文章。

系列文章

js外掛式開發一些構想

相關文章