DPlayer/README.md

137 lines
3.5 KiB
Markdown
Raw Normal View History

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.
[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
## 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`
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-18 14:37:02 +00:00
- [ ] 微博登录
2016-05-18 14:37:02 +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)