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
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
