研究這個之前我度娘了一下相關的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：
因此我
哈哈哈
存在的坑
ios
safari瀏覽器下只要點了播放直接全屏了 阻止不了！ 也就是說safari下彈幕做不了！
微信瀏覽器下是可以阻止全屏的 所以可以做彈幕 而且最好是默認關閉掉手機的旋轉功能 我們自己旋轉整個包裹video的元素 這樣雖然那個惡心的微信頭部條到了手機左或右側 但video撐滿了並且包含在了頁面區域里！
android
設置absolute也搞不定彈幕與video的層級關系 所以安卓。。有解決方案務必告知
彈幕播放這東西canvas來做最好 我用react來做的一個原因是不想荒廢了它 但其中最關鍵的是
（就算滾動條到了這兒 我也不想告訴你為什么！）