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