eazydanmaku v1.0.4

eazyDanmaku

A Danmaku plugin for the web,一个用于web端的弹幕插件(支持TypeScript)

安装

$  npm install easydanmaku --save

demo预览地址

初始设置

弹幕初始化属性

弹幕事件

使用

ps : 更多细节可查阅包文件夹中的demo

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

• 循环播放
• 发送单条弹幕
• 多次批量插入
• 居中弹幕

<template>
    <div id='container'></div>
</template>
<script>
    import EazyDanmaku from 'easydanmaku';
    export default {
        //~~~
        mounted() {
            const Danmaku = new EazyDanmaku({
                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);
    })

    let set = new Set();
    setInterval( () => {
        for(let i = 0; i<10; i++) {
            set.add(Math.round(Math.random()*1000))
        }
                         //弹幕内容      是否包含头像   弹幕样式 
        Danmaku.batchSend(Array.from(set),false,'danmaku-wrapper');
        set.clear();
    },1000)

    setTimeout(() => {
                           //弹幕内容  弹幕样式  持续时间(ms) 回调函数
        Danmaku.centeredSend('弹幕内容','danmaku-wrapper',1000,(e)=>{
            alert('end!');
            console.log(e);
        })
    },2000)

有疑问可通过1041138537@qq.com联系作者

License

MIT

Copyright (c) 2020-present, Peng Pan