react視頻彈幕播放

標籤：

不要陷入輪子的圍城中 說的確實沒錯。。 那我為什麼還要研究這個彈幕系統呢 因為我沒有發現業界有特別高端的彈幕播放器 基於html5的 也可能是我見的少 如果你發現優秀的彈幕播放器 務必告知！

研究這個之前我度娘了一下相關的html5彈幕播放器 還是有相關外掛程式的 但是都太low 太low 太low。。。

那些每幀運動幾個像素和無視彈幕重疊問題的彈幕播放器都不用考慮！

我理想的彈幕系統要儘可能的解決重疊問題 而且每條彈幕的運動軌跡不光只是從右往左的線性運動 還可以是各種參數方程 

如下效果 

 

上面就有2種運動軌跡 ！ 還可以點右側的那個旋轉按鈕切換到橫屏！

demo君戳我  ←請用ios  打不開多開幾次

 

我就粗略的講講  感興趣的自己看源碼吧~

關鍵的排放和重疊問題

我分了3個通道上至下0 1 2  比如第一秒中存在 ‘我是高貴的’6條彈幕 那麼就這樣排放  0->1>2->0->1->2  

一個彈幕初始座標位置要考慮通道中是否存在一個它前面的彈幕對象 那個彈幕在可視區內和外都要做不同的處理

排好初始座標後 接下來就是運動 因為每條彈幕的長度幾乎都不同 比較方便的做法就是用利用彈幕長度來計算出一個速度屬性 但是這樣是解決不了重疊問題！

我的做法是 對每一秒每一個通道放入的彈幕對象們做線性插值  它們的終值要利用相互的彈幕長度來計算 讓它們在可視區運動過程中不重疊！

存入資料庫的結構

 我截了一部分 其中欄位t（視頻的秒）=1 它們的text（彈幕文字）就是‘我是高貴的’。。這裡有亂碼 遇到奇葩問題了  問了弄後端的幾個人也都解決不了。。。我也懶得研究這個亂碼了

text=‘我是高貴的’這6條資料比較特殊  它們的tns欄位分配了額外的屬性 所以你會看到它們運動軌跡相對其他彈幕不同

我的彈幕和視頻資料哪來的？

你會看到彈幕都是相關的吐槽。。我是從b站那邊get下來的 視頻資源也是的！

它們的彈幕資源是個xml檔案 我就把裡面的吐槽內容扣下來了 如下xml：

因此我

哈哈哈*n

發現的坑

ios

safari瀏覽器下只要點了播放直接全屏了 阻止不了！ 也就是說safari下彈幕完全做不了！

瀏覽器下是可以阻止全屏的 所以可以做彈幕 而且最好是預設關閉掉手機的旋轉功能  我們自己旋轉整個包裹video的元素 這樣雖然那個噁心的頭部條到了手機左側 但video撐滿了並且包含在了頁面地區裡！

android

設定absolute也搞不定彈幕與video的層級關係 所以安卓。。有解決方案務必告知

移動端的坑很嚴重！

 

其實這東西用canvas來做最好 當元素數量多起來html效能就不行了 而且我想給某些彈幕再加上高大上的效果呢？非canvas並不能滿足！

我用react來做的原因就是不想荒廢了它 其中最關鍵的是

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

格調高（不接受撕逼）

react視頻彈幕播放