2016-05-03 14:11:47 +00:00
|
|
|
# DPlayer
|
|
|
|
|
|
|
|
[![npm](https://img.shields.io/npm/v/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
|
|
|
|
[![npm](https://img.shields.io/npm/l/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
|
|
|
|
[![devDependency Status](https://img.shields.io/david/dev/DIYgod/dplayer.svg?style=flat-square)](https://david-dm.org/DIYgod/DPlayer#info=devDependencies)
|
|
|
|
[![npm](https://img.shields.io/npm/dt/dplayer.svg?style=flat-square)](https://www.npmjs.com/package/dplayer)
|
|
|
|
[![Travis](https://img.shields.io/travis/DIYgod/DPlayer.svg?style=flat-square)](https://travis-ci.org/DIYgod/DPlayer)
|
|
|
|
[![%e2%9d%a4](https://img.shields.io/badge/made%20with-%e2%9d%a4-ff69b4.svg?style=flat-square)](https://www.anotherhome.net/)
|
|
|
|
|
2016-05-17 18:23:44 +00:00
|
|
|
> Wow, such a lovely HTML5 danmaku video player
|
2016-05-03 14:11:47 +00:00
|
|
|
|
|
|
|
## Introduction
|
|
|
|
|
|
|
|
**Notice:** This player is still under development.
|
|
|
|
|
2016-05-19 14:49:13 +00:00
|
|
|
[Demo](http://diygod.github.io/DPlayer/demo/)
|
|
|
|
|
2016-05-20 00:48:30 +00:00
|
|
|
Screenshot
|
|
|
|
![image](http://i.imgur.com/9IUHIj1.jpg)
|
|
|
|
|
2016-05-03 14:11:47 +00:00
|
|
|
## Install
|
|
|
|
|
|
|
|
```
|
|
|
|
$ npm install dplayer --save
|
2016-05-03 14:14:11 +00:00
|
|
|
```
|
2016-05-03 14:11:47 +00:00
|
|
|
|
2016-05-19 14:49:13 +00:00
|
|
|
## Usage
|
|
|
|
|
|
|
|
### HTML
|
|
|
|
|
|
|
|
```HTML
|
|
|
|
<link rel="stylesheet" href="DPlayer.min.css">
|
|
|
|
<!-- ... -->
|
|
|
|
<div id="player1" class="dplayer"></div>
|
|
|
|
<!-- ... -->
|
|
|
|
<script src="DPlayer.min.js"></script>
|
|
|
|
```
|
|
|
|
|
|
|
|
### JS
|
|
|
|
|
|
|
|
```JS
|
|
|
|
var dp = new DPlayer(option);
|
|
|
|
dp.init();
|
|
|
|
```
|
|
|
|
|
|
|
|
#### Options
|
|
|
|
|
|
|
|
```JS
|
|
|
|
var option = {
|
|
|
|
element: document.getElementById('player1'), // Optional, player element
|
|
|
|
autoplay: false, // Optional, autoplay video, not supported by mobile browsers
|
|
|
|
theme: '#FADFA3', // Optional, theme color, default: #b7daff
|
|
|
|
loop: true, // Optional, loop play music, default: true
|
|
|
|
video: { // Required, video info
|
|
|
|
url: '若能绽放光芒.mp4', // Required, video url
|
|
|
|
pic: '若能绽放光芒.png' // Optional, music picture
|
|
|
|
},
|
|
|
|
danmaku: { // Optional, showing danmaku
|
2016-05-20 02:33:55 +00:00
|
|
|
id: '9E2E3368B56CDBB4', // Required, danmaku id, MUST BE UNIQUE, CAN NOT USE THESE IN YOUR NEW PLAYER: `https://dplayer.daoapp.io/list`
|
2016-05-19 14:49:13 +00:00
|
|
|
api: 'https://dplayer.daoapp.io/', // Required, danmaku api
|
|
|
|
token: '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
|
|
|
|
|
|
|
|
```js
|
|
|
|
var DPlayer = require('DPlayer');
|
|
|
|
var dp = new DPlayer({
|
|
|
|
// ...
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
2016-05-20 02:33:55 +00:00
|
|
|
### Danmaku back-end
|
|
|
|
|
|
|
|
**Ready-made API:**
|
|
|
|
|
|
|
|
`https://dplayer.daoapp.io/`
|
|
|
|
|
|
|
|
**Build yourself:**
|
|
|
|
|
|
|
|
Required environment
|
|
|
|
|
|
|
|
- Node.js
|
|
|
|
- Mongodb
|
|
|
|
|
2016-05-03 14:11:47 +00:00
|
|
|
## Run in development
|
|
|
|
|
|
|
|
```
|
|
|
|
$ npm install
|
|
|
|
$ npm run dev
|
|
|
|
```
|
|
|
|
|
|
|
|
## Make a release
|
|
|
|
|
|
|
|
```
|
|
|
|
$ npm install
|
|
|
|
$ npm run build
|
|
|
|
```
|
|
|
|
|
2016-05-13 00:43:39 +00:00
|
|
|
## Related Projects
|
|
|
|
|
|
|
|
- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho)
|
|
|
|
|
2016-05-11 17:27:56 +00:00
|
|
|
## Todo
|
|
|
|
|
2016-05-19 14:49:13 +00:00
|
|
|
- [ ] 中英文切换
|
2016-05-18 14:37:02 +00:00
|
|
|
|
2016-05-19 14:49:13 +00:00
|
|
|
- [ ] 微博登录
|
2016-05-18 14:37:02 +00:00
|
|
|
|
2016-05-19 14:49:13 +00:00
|
|
|
- [ ] 锁定IP规则
|
2016-05-11 17:27:56 +00:00
|
|
|
|
|
|
|
- [ ] icon 动画
|
|
|
|
|
2016-05-03 14:11:47 +00:00
|
|
|
## LICENSE
|
|
|
|
|
|
|
|
MIT © [DIYgod](http://github.com/DIYgod)
|