如何開發(fā)一個自己的彈幕庫

時間：2023-06-23 15:30:01 | 來源：網(wǎng)站運營

時間：2023-06-23 15:30:01 來源：網(wǎng)站運營

如何開發(fā)一個自己的彈幕庫：

前言

之前做項目的時候需要一個彈幕效果，但是當時沒找到合適的彈幕庫，就自己寫了一個 vue-custom-barrage，下面說一下彈幕庫的實現(xiàn)原理，大家也可以后面開發(fā)自己的彈幕庫。

開發(fā)功能

1. 無碰撞彈幕
2. 暫停/開始
3. 自定義彈幕展示區(qū)域
4. 自定義彈幕風格且不需要 innerHTML，防止 xss 攻擊
5. 彈幕量拉滿 fps 也要接近 60

基本思路

大家可以把彈幕想象成一個個運動員，然后把屏幕想成運動場，運動員都在不同的跑道上跑步，互不干擾。







在同一條跑道上可以存在多個運動員，后一個運動員起跑的時機就是前一個運動員身體完全進入跑道，兩個運動員貼著跑不好看，可以讓后面的運動員稍等下再進入跑道。

無碰撞彈幕

大家看視頻的時候會發(fā)現(xiàn)彈幕長度肯定是不一樣的，而且速度也是不一樣的，假設(shè)現(xiàn)在跑道上有一個運動員 A，我們已知下面的數(shù)據(jù)：

1. 跑道總長：l
2. 自身寬度：l1
3. 運動總時長（指跑完 l + l1 的時長）：t
4. 自身起跑時間：t1
5. 當前時間：t2
6. 已運動時長：t3 = t2 - t1
7. 剩余運動時長：t4 = t - t3
8. 速度：v1 = (l + l1) / t

現(xiàn)在要上場的運動員 B 與 A 的極限碰撞位置就是在跑道的最左側(cè)：







我們就可以知道運動員 B 的數(shù)據(jù)：

1. 自身寬度：l2
2. 最大速度：v2 = l / t4
3. 運動總時長：t5 = (l + l2) / v2

我們按照這樣就可以依次計算出下個彈幕的最大速度，就可以達到所有彈幕不產(chǎn)生碰撞。

暫停/開始

對于我們的運動動畫，我們使用 animation 來實現(xiàn)，因為 css 變量會有繼承的效果，所以我們只要設(shè)置容器的樣式，所有彈幕都會停止或者繼續(xù)：

// 設(shè)置容器樣式container.style.setProperty('--playState', 暫停 || 播放)// 彈幕樣式.barrage { animation: xxx; animation-play-state: var(--playState);}但是注意每次暫停和播放的時候得記錄下來當前的時間用以計算每個彈幕的運動時長，要不后面的彈幕就會發(fā)生碰撞

自定義彈幕展示區(qū)域

這個我是去創(chuàng)建了一個單獨的跑道類，每個跑道會去觀察是否有新的彈幕，如果有的話就加入自己的跑道，所以我們知道去關(guān)閉某些跑道的觀察，就可以做到展示特定的區(qū)域。

自定義彈幕風格

因為彈幕不一定是只有文字，可能有很多用戶自定義的東西，我之前看的有些彈幕庫用的 innerHTML，但是這樣就可能會引來 xss 攻擊，我們只要站在巨人的肩膀上就可以輕松搞定，下面以 Vue 舉例：

// 我們封裝的 Vue 彈幕組件<Barrage> <template #default='data'> <div>自定義彈幕：{{ data }}</div> </template></Barrage>// 在彈幕組件中// 拿到插槽的內(nèi)容, data 是用戶傳入的數(shù)據(jù)const slots = this.$scopedSlots.default(data)// 拿到一個 Vue 子類const BarrageVNode = vue.extend({ render(h) { return h('div', slots) }})// 拿到對應(yīng)的 vmconst barrageInstance = new BarrageVNode().$mount()// 追加到容器中container.append(barrageDom.$el)這樣不論用戶想搞成什么樣子都可以了。

fps

我們使用 animation 結(jié)合 transform 來生成動畫，因為 transform 動畫會提升為 合成層，會觸發(fā) GPU 加速，且在動畫過程中是不會觸發(fā) layout 和 paint 的，性能是很高的：

延伸

大家看 B 站的時候會發(fā)現(xiàn)彈幕不會擋住視頻中的人物，下面說下他是怎么實現(xiàn)的。

效果

摳圖

前端會不停的請求當前視頻的人物摳圖，視頻每幀的人物摳圖應(yīng)該是用機器學(xué)習(xí)去做的。

css 實現(xiàn)

他給彈幕容器增加了一個 mask-image 屬性，url 對應(yīng)的就是剛才摳出來的人物圖，就這么簡單的一個屬性，就實現(xiàn)了彈幕的不遮擋效果

本地測試

我去把剛才的人物摳圖放到本地試了下效果，一模一樣。







.container { position: relative; border: 1px solid; width: 600px; height: 600px;}.masked { position: absolute; z-index: 2; width: 100%; height: 100%; -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKIHdpZHRoPSIyOTUuNDg4ODYyODM3MDQ1N3B4IiBoZWlnaHQ9IjUyMnB4IiB2aWV3Qm94PSIwIDAgMTgwLjAwMDAwMCAzMjAuMDAwMDAwIgogcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLDMyMC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCmZpbGw9IiMwMDAwMDAiIHN0cm9rZT0ibm9uZSI+CjxwYXRoIGQ9Ik0wIDE2MDUgbDAgLTE1OTUgMjQxIDAgMjQxIDAgLTcgMTEzIGMtMyA2MSAtMTEgMTQxIC0xOCAxNzYgLTE0IDc3IDYgMjE0IDUyCjM1NiA2MCAxODIgNjIgMTk0IDY2IDMzOCA1IDEzMyAtNiAyNDcgLTI0IDI0NyAtOSAwIC00MSAtNTUgLTQxIC03MSAwIC0yNQotNTQgLTgyIC05NiAtMTAxIC02MyAtMjcgLTg4IC0xMyAtMTI3IDc1IC0zMCA2OCAtMzAgNjkgLTE4IDE1MCAyMCAxMjkgNTgKMjY4IDg4IDMyMyAzNiA2NSA5OCAxMjAgMTYwIDE0MiA0NyAxNyA3NyAzMyAxNzYgOTUgNjQgNDEgNzcgODUgNTAgMTcyIC0xMwo0NCAtMTggOTEgLTE4IDE3NSAwIDEwNSAzIDEyMCAyOCAxNzIgMzIgNjQgNzIgOTkgMTM4IDExNyA0MiAxMiA1MCAxMSA5NCAtMTEKNDQgLTIxIDUwIC0yOSA3MiAtODggMjQgLTYzIDQ5IC0xNTIgNTkgLTIxNSA0IC0yMiAtMiAtNDIgLTI0IC03NSAtNjQgLTk2Ci00OCAtMTgyIDQzIC0yMzIgNzggLTQyIDE4OCAtOTUgMjEyIC0xMDIgMzggLTEyIDkyIC04OSAxMDggLTE1OCA5IC0zNSAyNwotOTkgNDAgLTE0MyAxMyAtNDQgMzggLTE0NyA1NSAtMjMwIDE2IC04MiAzNSAtMTcyIDQwIC0xOTggMTEgLTU1IDEzIC0xMTUgNAotMTcwIC02IC0zMiAtMTAgLTM3IC0zMyAtMzcgLTI4IDAgLTYxIC0zMCAtNjEgLTU1IDAgLTkgMTcgLTIwIDQ1IC0yNyA0OSAtMTMKNTAgLTE1IDMzIC03MyAtNiAtMjIgLTExIC00MyAtMTAgLTQ3IDMgLTEzIC0yNiAzIC0zMiAxOCAtNCAxMCAtMTQgMTIgLTMwIDgKLTMzIC04IC00MCAxNiAtMzkgMTM0IDEgMTA5IC0xNSAxNzMgLTQ0IDE4NiAtMjQgMTEgLTU3IDc5IC03MyAxNTAgLTIwIDkwCi00MyAxMTEgLTU1IDQ5IC01IC0yNiAtOSAtMzMgLTE1IC0yMyAtMTYgMjcgLTIwIC0xMCAtMTYgLTE1MCAzIC0xMTggOCAtMTQ4CjM2IC0yMzUgMzcgLTExNCA3MSAtMjQxIDkyIC0zMzUgMTIgLTUzIDE5IC02NyA0MSAtNzggMTYgLTggMjcgLTIxIDI3IC0zMyAwCi0xMSA3IC0yMiAxNSAtMjUgMTggLTcgMTkgLTUxIDIgLTExNyBsLTEyIC00OCAtMzkgNDcgYy0zOCA0NSAtMzkgNDYgLTU4IDI3Ci0xNSAtMTUgLTIwIC0zNyAtMjIgLTEwNiBsLTQgLTg3IDIyOSAwIDIyOSAwIDAgMTU5NSAwIDE1OTUgLTkwMCAwIC05MDAgMCAwCi0xNTk1eiIvPgo8L2c+Cjwvc3ZnPgo=");}.val { position: absolute; left: 20px; top: 130px;}<div class="container"> <div class="masked"> <div class="val">我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容</div> </div></div>

最后

大家可以借鑒或使用我的 vue-custom-barrage，一個基本彈幕的功能就上面我說的那些，如有疑問歡迎在評論區(qū)咨詢我。