整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
著視頻網(wǎng)站和直播網(wǎng)站的興起，彈幕的功能算是一個核心元素，彈幕最初是由日本視頻網(wǎng)站Niconico引入的，國內(nèi)除了在Bilibili和AcFun等彈幕視頻網(wǎng)站中使用之外，其他主流視頻網(wǎng)站中的視頻播放器也支持彈幕，對于視頻網(wǎng)站和直播網(wǎng)站來說，彈幕的交互實時性更高，更加受歡迎。
本文重點介紹一下彈幕的基本原理，以及JavaScript和HTML的代碼實現(xiàn)方式，最后分享一個彈幕的開源庫。
關(guān)于視頻網(wǎng)站建設(shè)，可以參考我們之前的通過Drupal構(gòu)建自建視頻課程平臺。
單條彈幕的屬性
彈幕的特性：
彈幕的基本模式：
彈幕的使用場景：
彈幕本身不是對視頻的操作，其實是給視頻上面加DIV等DOM元素，也就是給視頻上面加層，然后展示我們想要的內(nèi)容即可，目前彈幕的主要實現(xiàn)有兩種方式：
首先，這種我們自然想到用Canvas，使用Canvas能很方便地繪制動畫，并且獲得非常不錯的性能，目前前端不少動畫都是通過Canvas去做。不過對于基于Canvas的動畫而言，最大的問題就是“交互性”上面。
如果用HTML+CSS的方式實現(xiàn)，我們可以很簡單地通過監(jiān)聽原生DOM事件去知道哪一條彈幕與用戶鼠標發(fā)生了交互。但是通過Canvas，我們只能通過監(jiān)聽畫布的事件，然后做一堆遍歷計算坐標的騷操作去確定是哪一條彈幕。從鵝廠的視頻網(wǎng)站可以看到，他們的彈幕是可交互的，所以他們使用了HTML+CSS的實現(xiàn)方式；而B站的彈幕是非交互的，它提供Canvas和HTML+CSS可選，默認是前者。
雖然功能性上兩者的實現(xiàn)會有點差異，但彈幕的基本原理都是一樣。
所以彈幕本身就是對DIV元素的操作，DIV層一般在Video層上面，類似下面的圖，不過也有放在Video層下面，彈幕層在底下，詳情參考這篇文章的介紹 https://github.com/logcas/a-barrage
多層的彈幕實現(xiàn)
我們先分析一下文檔管理系統(tǒng)的基本需求以及功能點，
從上圖可以看到，彈幕是很清晰地分成了一行一行，我把它們稱為“軌道”。每一個彈幕都只在軌道上從右往左移動，不會越界。那么，要實現(xiàn)彈幕功能，首先我們必須把彈幕分成若干個軌道，然后再在合適的時間把彈幕“塞”進去讓它平移。
每一個軌道會有兩個屬性：
barrages: T[] = []
offset: number = 0
barrages為一個彈幕數(shù)組，offset則是已占據(jù)的寬度。offset用于滾動彈幕時，彈幕軌道添加彈幕前判斷最佳軌道；當彈幕類型時固定時無作用。barrages存放當前軌道上可現(xiàn)實的彈幕實例。
每一個軌道實例管理自己軌道中的數(shù)組，主要進行進行增、刪、重置以及更新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
} }
在知名的男性交友網(wǎng)站github上，已經(jīng)有一款很好用的彈幕開源解決方案，并且是國產(chǎn)的，叫abarrage，同時實現(xiàn)了Canvas和HTML+CSS的模式，要用的話直接在github把源代碼擼下來，并且有在線的體驗地址，效果非常不錯。
A-Barrage 同時支持Canvas渲染和HTML+CSS的渲染模式，你可以根據(jù)實際情況采用不同的渲染引擎進行彈幕的渲染。其中，Canvas是非交互式渲染，也就是說，采用Canvas渲染的彈幕并不會有任何的交互操作，純展示性質(zhì)；HTML+CSS是交互式渲染，如果你的網(wǎng)站允許用戶與彈幕之間進行一些交互（如點贊、回復(fù)等），那么可以采用HTML+CSS的渲染模式，它會結(jié)合瀏覽器的DOM事件進行響應(yīng)。
github地址： https://github.com/logcas/a-barrage
測試地址： https://logcas.github.io/a-barrage/example/css3.html
網(wǎng)站首頁
發(fā)彈幕截圖
信很多朋友都見到過這種被稱之為彈幕樣式的排版，但是卻不知道怎么做，今天豆貓兒就來跟大家聊一聊彈幕樣式如何做。
這種樣式，可以使公眾號里面的文字隨意“漂浮”，給讀者耳目一新的感覺，另外可以增加幽默感哦~
沒錯就是——135編輯器。用戶可以在135編輯器官網(wǎng)（www.135editor.com）點擊『素材庫』=>『樣式中心』=>『動態(tài)樣式』這個分類下面集合了所有135編輯器的動態(tài)樣式，其中也包括彈幕樣式。
這里我們主要介紹4種常用的彈幕樣式詳細操作方法。
1、秒刷
在文本編輯框內(nèi)輸入彈幕文字，每打一句進行一次換行。最多可以打11句。然后點擊彈幕樣式，就直接刷好了。
示例
秒刷法
2、HTML替換文字
直接選擇彈幕樣式，在文本編輯框功能欄里點擊【HTML】，切換到代碼頁面。在代碼頁面找到下圖進行修改。修改完成后，再次點擊【HTML】即可回到編輯前的頁面。
示例
3、更改背景圖片方法
135提供了兩種彈幕樣式，一種是有背景圖的，一種是沒有背景圖的。你可以有兩種方式去更換圖片。
1、你可以用秒刷的方式換圖，先傳圖片，選中圖片后點擊左側(cè)的樣式。
2、先點擊左側(cè)樣式，把它置入編輯器內(nèi)，然后選中樣式中的圖片，點擊換圖。
示例一
示例二
4、高階玩法
切換成【HTML】頁面，找到與下圖類似的代碼，進行修改。
▼更改彈幕大小
大（size=30）
大
小（size=14）
小
▼更改彈幕起始位置
下面這個彈幕
位置值是：from="800" to="-400"
想讓它從中間開始飄
于是修改from值="160"
甚至你還可以改成from="-400" to="800"
那么它就變成倒著飛
135編輯器真好用
▼更改彈幕速度
太快了也可以變慢一點：dur=“8s”
不知道大家有沒有學(xué)會135編輯器提供的彈幕樣式呢？歡迎在評論區(qū)交流
·
我是豆貓，運營要好玩也要有趣~
?
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
