内容简介:→ Demo located at通过npm或者cdn获取用法和
- 基于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 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Opencv图像处理系列(六)—— 图像梯度
- Opencv图像处理系列(九)—— 图像轮廓
- Python 图像处理 OpenCV (15):图像轮廓
- Opencv图像处理系列(三)——图像二值化
- Opencv图像处理系列(八)—— 图像金字塔
- 图像处理的滤镜算法
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Markdown 在线编辑器
Markdown 在线编辑器
HEX CMYK 转换工具
HEX CMYK 互转工具