著視頻網站和直播網站的興起，彈幕的功能算是一個核心元素，彈幕最初是由日本視頻網站Niconico引入的，國內除了在Bilibili和AcFun等彈幕視頻網站中使用之外，其他主流視頻網站中的視頻播放器也支持彈幕，對于視頻網站和直播網站來說，彈幕的交互實時性更高，更加受歡迎。

本文重點介紹一下彈幕的基本原理，以及JavaScript和HTML的代碼實現方式，最后分享一個彈幕的開源庫。

關于視頻網站建設，可以參考我們之前的通過Drupal構建自建視頻課程平臺。

彈幕基礎知識

單條彈幕的屬性

1. 模式：滾動彈幕、逆向彈幕、頂部彈幕、底部彈幕。
2. 基本屬性：正文、出現時間、持續時間、字體、字號、顏色等樣式。
3. 容器：塊級元素，一般是與視頻大小相同的區域。

彈幕的特性：

1. 空間的獨立性：雖然在同一個元素內展現，但空間計算上每種彈幕模式處于不同層，每種模式也可以有多層，每層內的彈幕占位不會重疊。
2. 渲染的確定性：如果彈幕容器和渲染的列表固定不變，在沒有用戶交互（比如暫停單條彈幕）的情況下，每次渲染每條彈幕所出現的位置和順序都是固定的。
3. 各模式的統一性：每種模式的彈幕的生存時間保持一致。

彈幕的基本模式：

1. 滾動彈幕：自右向左勻速滾動過屏幕的彈幕，以自上而下的優先度展示。
2. 逆向彈幕：自左向右勻速滾動過屏幕的彈幕，以自上而下的優先度展示，逆向彈幕是相對于滾動彈幕的相反方向滾動的彈幕展示模式。
3. 頂部彈幕：自上而下靜止居中的彈幕、以自上而下的優先度展示。
4. 底部彈幕：自下而上靜止居中的彈幕、以自下而上的優先度展示。

彈幕的使用場景：

1. 點播視頻互動，把評論搬到彈幕上來
2. 直播互動，直播視頻中，可以直接通過彈幕討論、互動
3. 視頻內容增強，比如對視頻中某些內容進行解釋，描述等
4. 標記視頻亮點，對視頻中的高亮進行提示等
5. 網頁互動，比如彈幕可以點贊，回復等
6. 互動上墻，大屏的投票可以通過彈幕來實現交互大墻
7. 蒙版彈幕，可以對某個地方不想讓用戶看到，可以通過彈幕掩蓋
8. 非文字彈幕，比如表情、紅包等等交互效果

彈幕的實現原理

彈幕本身不是對視頻的操作，其實是給視頻上面加DIV等DOM元素，也就是給視頻上面加層，然后展示我們想要的內容即可，目前彈幕的主要實現有兩種方式：

1. Canvas
2. HTML+CSS

首先，這種我們自然想到用Canvas，使用Canvas能很方便地繪制動畫，并且獲得非常不錯的性能，目前前端不少動畫都是通過Canvas去做。不過對于基于Canvas的動畫而言，最大的問題就是“交互性”上面。

如果用HTML+CSS的方式實現，我們可以很簡單地通過監聽原生DOM事件去知道哪一條彈幕與用戶鼠標發生了交互。但是通過Canvas，我們只能通過監聽畫布的事件，然后做一堆遍歷計算坐標的騷操作去確定是哪一條彈幕。從鵝廠的視頻網站可以看到，他們的彈幕是可交互的，所以他們使用了HTML+CSS的實現方式；而B站的彈幕是非交互的，它提供Canvas和HTML+CSS可選，默認是前者。

雖然功能性上兩者的實現會有點差異，但彈幕的基本原理都是一樣。

所以彈幕本身就是對DIV元素的操作，DIV層一般在Video層上面，類似下面的圖，不過也有放在Video層下面，彈幕層在底下，詳情參考這篇文章的介紹 https://github.com/logcas/a-barrage

彈幕實現的技術細節

我們先分析一下文檔管理系統的基本需求以及功能點，

從上圖可以看到，彈幕是很清晰地分成了一行一行，我把它們稱為“軌道”。每一個彈幕都只在軌道上從右往左移動，不會越界。那么，要實現彈幕功能，首先我們必須把彈幕分成若干個軌道，然后再在合適的時間把彈幕“塞”進去讓它平移。

每一個軌道會有兩個屬性：

barrages: T[] = []
offset: number = 0

barrages為一個彈幕數組，offset則是已占據的寬度。offset用于滾動彈幕時，彈幕軌道添加彈幕前判斷最佳軌道；當彈幕類型時固定時無作用。barrages存放當前軌道上可現實的彈幕實例。

每一個軌道實例管理自己軌道中的數組，主要進行進行增、刪、重置以及更新offest的操作。

添加新彈幕

push(...items: T[]) {
this.barrages.push(...items)
}

刪除彈幕

remove(index: number) {

if (index < 0 || index >= this.barrages.length) { return }

this.barrages.splice(index, 1)

}

重置軌道

reset() {
this.barrages = [] this.offset = 0
}

更新剩余軌

updateOffset() {
const endBarrage = this.barrages[this.barrages.length - 1]
if (endBarrage && isScrollBarrage(endBarrage)) {
const { speed } = endBarrage this.offset -= speed
} }

拿來即用-開源的方案

在知名的男性交友網站github上，已經有一款很好用的彈幕開源解決方案，并且是國產的，叫abarrage，同時實現了Canvas和HTML+CSS的模式，要用的話直接在github把源代碼擼下來，并且有在線的體驗地址，效果非常不錯。

A-Barrage 同時支持Canvas渲染和HTML+CSS的渲染模式，你可以根據實際情況采用不同的渲染引擎進行彈幕的渲染。其中，Canvas是非交互式渲染，也就是說，采用Canvas渲染的彈幕并不會有任何的交互操作，純展示性質；HTML+CSS是交互式渲染，如果你的網站允許用戶與彈幕之間進行一些交互（如點贊、回復等），那么可以采用HTML+CSS的渲染模式，它會結合瀏覽器的DOM事件進行響應。

github地址： https://github.com/logcas/a-barrage

測試地址： https://logcas.github.io/a-barrage/example/css3.html

大家好，我是愛你三千遍斯塔克，之前我們討論了main組件與樣式，那么如何快速搭配ELEMENT-UI搭建一個header樣式前端框架呢？這里有些資料可供大家參考，希望對大家有幫助：

1、header里面的樣式

2、數據就放到data里面

3、導航欄的組件

4、利用ELEMENT-UI設計一個導航菜單

5、把這個隱藏代碼展開

6、找到對應代碼復制下來

7、不用，將他刪掉

8、打開默認的選擇地址

9、設計的字符串為1

10、引入CSS的樣式庫，沒有出現樣式是因為在main.js中沒有引入樣式庫

11、就說明他很經常接觸到樣式庫了

12、header里面有一個背景顏色

13、header的背景顏色就是這樣

14、header的顏色得到了統一

15、現在的默認樣式是這個

16、默認打開就是1的選項

17、打開樣式是2-1

18、第二個樣式

19、router-view，這里的樣式放到這里

?