WebComponent+WebGl的實時影象處理彈幕播放器

戴戴戴發表於2019-02-26
Web播放器

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…

截圖

WebComponent+WebGl的實時影象處理彈幕播放器 WebComponent+WebGl的實時影象處理彈幕播放器 WebComponent+WebGl的實時影象處理彈幕播放器 WebComponent+WebGl的實時影象處理彈幕播放器 WebComponent+WebGl的實時影象處理彈幕播放器

Usage

通過npm或者cdn獲取

npm i danmaku-player
複製程式碼

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

相關文章