WebComponent+WebGl的實時圖像處理彈幕播放器

github -> github.com/dwqdaiwenqi…

融合了WebGl和Web Componet的實時圖像處理彈幕播放器

特徵

• 基於Web Components ，擁抱Web Components標準，內部使用的 omi 做爲開發Web Components的開發框架，omi是個很是棒的現代框架，強力推薦！
• 高性能的，使用WebGl進行渲染，同頻彈幕數達到5000+，fps依舊堅挺
• 想比傳統的彈幕顯示運動方式，添加了曲線模式的彈幕發送
• 內置實時圖像處理的特效指令（切勿在全屏模式下使用），當前有#護眼、#下雪等 - 將來將支持更多的特效指令

→ Demo located at dwqdaiwenqi.github.io/danmaku-pla…

截圖

Usage

經過npm或者cdn獲取

npm i danmaku-player
複製代碼

• unpkg.com/danmaku-pla…

HTML

用法和<video/>標籤差很少，直接寫入到html中便可

<script src="//unpkg.com/danmaku-player@latest/dist/scripts/danmaku-player.min.js"></script>
  <danmaku-player id="player" autoplay="false" danmakuapi="//static.xyimg.net/cn/static/fed/common/danmaku-list.json" thumbnail="//static.xyimg.net/cn/static/fed/common/img/thumbnail-tile-90X1-scale-160X90.png" thumbnailtile="90" poster="//static.xyimg.net/cn/static/fed/common/img/posterx.jpg" src="//static.xyimg.net/cn/static/fed/common/media/Galileo180.mp4"></danmaku-player>
  <script> var $player = document.querySelector('#player') // $player.loop = false $player.autoplay =false $player.playbackrate=1 $player.enableSendDanmaku=true $player.enableSwitchDanmaku=true // $player.play() $player.addEventListener('senddanmaku',(e)=>{ //debugger console.log('senddanmaku') }) $player.addEventListener('progress',e=>{ console.log('progress') }) $player.addEventListener('loadeddata',e=>{ console.log('loadeddata') }) $player.addEventListener('canplay',e=>{ console.log('canplay') }) $player.addEventListener('play',(e)=>{ console.log('play') }) $player.addEventListener('timeupdate',(e)=>{ console.log('timeupdate') }) $player.addEventListener('ended',e=>{ console.log('ended.') }) </script>
複製代碼

React

import 'danmaku-player'
//...
render(){
  // react中須要用ref獲取到原生dom對象
    return(
      <section> <danmaku-player ref={el=>this.$player=el}src="//static.xyimg.net/cn/static/fed/common/media/Galileo180.mp4"></danmaku-player> </section> ) } componentDidMount(){ this.$player.addEventListener('play',()=>{ //... }) //... } 複製代碼

特效指令

特效指令#xxx，第一次輸入#xxx開啓了特效，再次輸入#xxx關閉特效。目前有#下雪，更多指令待開發...

標籤屬性

屬性	描述
src	必須，視頻的播放地址，目前支持mp4
poster	沒必要須，視頻海報
autoplay	沒必要須， 自動播放，默認是false
thumbnail	沒必要須，視頻縮略圖
thumbnailtile	沒必要須，視頻縮略圖橫向分割數量
loop	沒必要須， 循環播放，默認是false
danmakuapi	沒必要須，彈幕的資源url

相關屬性&方法

屬性或方法	描述
loop	沒必要須，循環播放，默認是false
autoplay	沒必要須， 自動播放，默認是false
loop	沒必要須， 循環播放，默認是false
playbackrate	沒必要須，播放速度，默認是1.0
enableSendDanmaku	沒必要須，發送彈幕的按鈕顯示，默認是false
enableSwitchDanmaku	沒必要須，切換彈幕的顯示與隱藏，默認是false
play()	播放
pause()	暫停
sendDanmaku()	發送彈幕，參數(text='',option={})

相關事件

事件名	描述
progress	相關部分的下載進度時週期性地觸發
loadeddata	媒體的第一幀已經加載完畢
canplay	已經有足夠的數據可供播放時觸發
timeupdate	時間已經改變
ended	播放結束時觸發
senddanmaku	用戶發送了一條彈幕

.sendDanmaku(text='',options={})

$player.sendDanmaku('彈幕文字。。。',{
  fill:'blue', // 彈幕顏色
  mode:'linear', // 彈幕運動模式有 linear|fixed|curve ,線性|上方固定|曲線
  fontSize：20,// 彈幕字體大小
  alpha:1 // 彈幕透明度
})
複製代碼

danmakuapi

//danmakuapi應當返回以下格式
{
  //視頻的第0秒
  0:{
    data:[
      ｛text:'彈幕文字',fill:'彈幕顏色',mode:'運動模式'，fontSize:'彈幕字體大小',alpha:'彈幕透明度'}
    ]
  },
  //視頻的第一秒
  1:{
    data:[
      ｛text:'彈幕文字',fill:'彈幕顏色',mode:'運動模式'，fontSize:'彈幕字體大小',alpha:'彈幕透明度'},
      ｛text:'彈幕文字',fill:'彈幕顏色',mode:'運動模式'，fontSize:'彈幕字體大小',alpha:'彈幕透明度'}
    ]
  }
  //...
}
複製代碼

你想問

爲何不要在全屏模式下使用#xxx特效指令

當調用特效指令，如：#下雪，播放器的渲染就不使用<video/>了，而是切換成<canvas/>獲取WebGl對象進行渲染。在全屏模式下，WebGl渲染了面積過大的實時視頻紋理致使了fps降低，目前無解（有好的解決方法的務必告知~）

移動端沒作處理嗎

對，自動播放和全屏這兩個問題移動瀏覽器沒解決，暫時不考慮兼容移動端

屬性和事件和原生的video一致嗎

不徹底一致，雖然不少事件和屬性名相同，可是都是通過包裝過的

視頻的縮略圖怎麼得到

若是要生成一張由90張小圖橫向合併的縮略圖，視頻時長是180秒，2(180/90)秒截圖一張圖，fps是24，每隔48（24*2）幀截取一張寬高是160*90的圖。

那麼就能夠執行以下的ffpmeg命令

ffmpeg -i Galileo.mp4 -frames 1 -vf "select=not(mod(n\,48)),scale=160:90,tile=90*1" assets/thumbnail-tile-90X1-scale-160X90.png
複製代碼

歡迎幫填坑，歡迎Pull Request

待完成...

License

MIT