0
点赞
收藏
分享

微信扫一扫

web端的弹幕插件 easy-danmaku-js

木匠0819 2022-04-19 阅读 57

easyDanmaku License

介绍

A Danmaku plugin for the web,一个用于web端的弹幕插件

特点

支持TypeScript、使用简单、使用css3过渡动画实现,弹幕流畅不卡顿、核心代码压缩后仅7kb。

安装

LINK

<script src="https://pprory.github.io/easyDanmaku/demo/easy-Danmaku.js"></script>
<!-- 压缩后编译成es5版本 -->
<script src="https://pprory.github.io/easyDanmaku/demo/easy-Danmaku.min.js"></script>

NPM

$  npm install easy-danmaku-js --save

弹幕初始化属性
属性 类型 说明 默认值

属性 类型说明 默认值
el string弹幕所挂载的父节点
wrapperStyle string所有弹幕初始样式 default-style
line number弹幕行数 10
speed number弹幕速度 5
colourful boolean彩色弹幕 false
runtime number循环弹幕播放时长 10
loop boolean是否循环播放 false
coefficient number弹幕密度系数 1.38
hover boolean鼠标hover时是否暂停播放弹幕 false

弹幕事件

事件 回调参数返回值 说明
onComplete voidvoid 循环播放一轮或者批量弹幕插入完毕触发
onHover 所hover的dom对象void 循环播放一轮或者批量弹幕插入完毕触发

弹幕方法

方法名说明参数例子
send发送单条弹幕(弹幕内容可用HTML标签包裹使用data-**标识特定数据)弹幕内容,弹幕样式,回调函数send(‘内容’,‘container-style’,function(e){})
centeredSend发送居中弹幕弹幕内容, 弹幕样式, 持续时间(ms), 回调函数centeredSend(‘内容’,‘container-style’,3000,function(e){})
batchSend发送批量弹幕(不包含头像)弹幕内容数组例,是否包含头像,默认样式batchSend([‘内容一’,‘内容二’],false,‘container-style’)
batchSend发送批量弹幕(包含头像)弹幕内容数组例,是否包含头像,默认样式batchSend([{avatar:url,content:‘弹幕内容’}],true,‘container-style’)
play播放屏幕中所有弹幕
pause暂停屏幕中所有弹幕

例子
demo: https://pprory.github.io/easyDanmaku/demo/index.html

在Vue中使用(React,Angular中使用方式类似)

<template>
    <div id='container'></div>
</template>
<script>
    import easyDanmaku from 'easy-danmaku-js';
    export default {
        //~~~
        mounted() {
            const Danmaku = new easyDanmaku({
                el:'#container',                        //弹幕挂载节点
                colourful:true,                         //彩色弹幕
                line:10,                                //弹幕行数
                wrapperStyle:'danmaku-wrapper',         //默认弹幕样式
                speed:5,                                //弹幕播放速度
                runtime:3,                              //播放一次的时常
                loop:true,                              //开启循环播放
                hover:true,                             //鼠标移入悬停
                onComplete:()=> {                       //播放结束
                    console.log('end');
                },                                      //hover时 参数为该悬停元素
                onHover:(dom) => {
                    console.log(dom);
                }
            })
            const data = ['danmaku1','danmaku2','danmaku3','danmaku4','danmaku5','danmaku6']
            Danmaku.batchSend(data)
        }
        // ~~~
    };
</script>
<style>
#container{
    width:600px;
    height:400px;
    margin:0 auto;
}
.danmaku-wrapper{
    background: greenyellow;
    border-radius: 8px;
}
</style>
发送单条弹幕

    // 弹幕内容, 弹幕样式, 回调函数
    Danmaku.send('弹幕内容','danmaku-wrapper',(e)=>{
        alert('end!');
        console.log(e);
    })
多次批量发送弹幕

    const Danmaku2 = new EasyDanmaku({
        el:'#container2',
        colourful:true,
        line:10,
        wrapperStyle:'danmaku-wrapper',
        speed:3,
        hover:true,
        onComplete:function(){
            console.log('单次批量弹幕插入完毕');
            send();
        }
    })
    function send(){
        const data = ['danmaku1','danmaku2','danmaku3','danmaku4','danmaku5','danmaku6']
        Danmaku2.batchSend(data)
    }
    send();
居中弹幕发送

    Danmaku.centeredSend('弹幕内容','danmaku-wrapper',1000,(e)=>{
        alert('end!');
        console.log(e);
    })
举报

相关推荐

0 条评论