DPlayer

Wow, such a lovely HTML5 danmaku video player

Introduction

Notice: This player is still under development.

Demo

Screenshot

Install

$ npm install dplayer --save

Usage

HTML

<linkrel="stylesheet" href="DPlayer.min.css"><!-- ... --><divid="player1" class="dplayer"></div><!-- ... --><scriptsrc="DPlayer.min.js"></script>

JS

vardp=newDPlayer(option);dp.init();

Options

varoption={element: document.getElementById('player1'),// Optional, player elementautoplay: false,// Optional, autoplay video, not supported by mobile browserstheme: '#FADFA3',// Optional, theme color, default: #b7daffloop: true,// Optional, loop play music, default: truevideo: {// Required, video infourl: '若能绽放光芒.mp4',// Required, video urlpic: '若能绽放光芒.png'// Optional, music picture},danmaku: {// Optional, showing danmakuid: '9E2E3368B56CDBB4',// Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`api: 'https://dplayer.daoapp.io/',// Required, danmaku apitoken: 'tokendemo'// Optional, danmaku token for api}}

API

• dp.init()
• dp.play()
• dp.pause()

Event binding

dp.on(event, handler)

event:

• play: Triggered when DPlayer start play
• pause: Triggered when DPlayer paused
• canplay: Triggered when enough data is available that DPlayer can be played
• playing: Triggered periodically when DPlayer is playing
• ended: Triggered when DPlayer ended
• error: Triggered when an error occurs

Work with module bundler

varDPlayer=require('DPlayer');vardp=newDPlayer({// ...});

Danmaku back-end

Ready-made API:

https://dplayer.daoapp.io/

Build yourself:

Required environment

• Node.js
• Mongodb

Run in development

$ npm install
$ npm run dev

Make a release

$ npm install
$ npm run build

Related Projects

• DPlayer-for-typecho
• Hexo-tag-dplayer

Todo

• 中英文切换

• 微博登录

• 锁定IP规则

• icon 动画

LICENSE

MIT © DIYgod