最近在著手開發彈幕視頻網站，通過html5中的canvas實現了彈幕的功能。
那么閑言碎語不要講，先說思路后上代碼。
思路：從頁面布局上來說就是將一塊畫布覆蓋在了video標簽產生的視頻窗口之上，使用絕對定位就能實現了。最重要的就是js控制畫布上彈幕的顯示了，每一個彈幕都包裝成一個對象，對象包含的屬性有彈幕應該出現的時間，彈幕的顏色，彈幕是否是移動的以及彈幕的文本。彈幕對象擁有方法包含：設置彈幕的橫縱坐標，彈幕的移動函數。實現的原理，在監聽視頻開始播放的事件，在視頻開始播放時生成一個定時器，定時器每隔一個時間去遍歷循環彈幕對象數組并根據對象的屬性在畫布的適當位置上繪制出彈幕，計時器中除了繪制彈幕的代碼還有執行更新彈幕數組的代碼。
版權所有:易賢網
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試