mirrors/DPlayer
1
0
Fork 0
mirror of https://github.com/DIYgod/DPlayer synced 2024-11-22 10:02:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

add docs

Browse Source
This commit is contained in:
DIYgod 2016-11-28 12:28:51 +08:00
parent 25146645da
commit 331921b9a7
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
2 changed files with 3 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

186
README.md
View File

@ -14,6 +14,8 @@
[Demo](http://dplayer.js.org/)
[Docs](http://dplayer.js.org/docs)
Using DPlayer on your project? [Let me know!](https://github.com/DIYgod/DPlayer/issues/31)
Screenshot
@ -31,190 +33,6 @@ $ npm install dplayer --save
[BootCDN](http://www.bootcdn.cn/dplayer/)
## Usage
### HTML
```HTML
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="dist/DPlayer.min.js"></script>
```
### JS
```JS
var dp = new DPlayer(option);
```
**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
lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
hotkey: true, // Optional, binding hot key, including left right and Space, default: true
preload: 'auto', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
video: { // Required, video info
url: '若能绽放光芒.mp4', // Required, video url
pic: '若能绽放光芒.png' // Optional, music picture
},
danmaku: { // Optional, showing danmaku, ignore this option to hide danmaku
id: '9E2E3368B56CDBB4', // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://api.prprpr.me/dplayer/list`
api: 'https://api.prprpr.me/dplayer/', // Required, danmaku api
token: 'tokendemo', // Optional, danmaku token for api
maximum: 1000, // Optional, maximum quantity of danmaku
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'] // Optional, additional danmaku, see: `Bilibili 弹幕支持`
}
}
```
**API**
+ `dp.play()` // Resume play
+ `dp.play(time)` // Set currentTime
+ `dp.pause()` // Pause
+ `dp.toggle()` // Toggle between play and pause
+ `dp.on(event, handler)` // Event binding
+ `dp.switchVideo(video, danmaku)` // Switch to a new video, the format of `video` and `danmaku` is the same as option
+ `dp.dan` // Return danmaku info
+ `dp.danIndex` // Return danmaku index
+ `dp.video` // Return native video, most [native api](http://www.w3schools.com/tags/ref_av_dom.asp) are supported
+ `dp.video.currentTime` // Returns the current playback position
+ `dp.video.loop` // Returns whether the video should start over again when finished
+ Most [native api](http://www.w3schools.com/tags/ref_av_dom.asp)
**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
**bilibili 弹幕及直链支持**
弹幕
API:
`https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】`
或 `https://api.prprpr.me/dplayer/bilibili?cid=【bilibili视频cid】`
```JS
var option = {
danmaku: {
// ...
addition: ['https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】']
}
}
```
直链
API:
`https://api.prprpr.me/dplayer/video/bilibili?aid=【bilibili视频AV号】`
或 `https://api.prprpr.me/dplayer/video/bilibili?cid=【bilibili视频cid】`
```JS
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            var response = JSON.parse(xhr.responseText);
            var dp1 = new DPlayer({
                // options
                screenshot: false,
                video: {
                    url: response.durl[0].url
                    // options
                }
            });
        }
        else {
            console.log('Request was unsuccessful: ' + xhr.status);
        }
    }
};
xhr.open('get', 'https://api.prprpr.me/dplayer/video/bilibili?aid=【bilibili视频AV号】', true);
xhr.send(null);
```
**Live Video (HTTP Live Streaming, M3U8 format) support**
It requires the library [hls.js](https://github.com/dailymotion/hls.js) and it should be loaded before DPlayer.min.js.
Live danamku is not supported yet.
```HTML
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/hls.min.js"></script>
<script src="dist/DPlayer.min.js"></script>
<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.m3u8'
// ...
}
});
</script>
```
**FLV format support**
It requires the library [flv.js](https://github.com/Bilibili/flv.js) and it should be loaded before DPlayer.min.js.
```HTML
<div id="player1" class="dplayer"></div>
<!-- ... -->
<script src="plugin/flv.min.js"></script>
<script src="dist/DPlayer.min.js"></script>
<script>
var dp = new DPlayer({
// ...
video: {
url: 'xxx.flv'
// ...
}
});
</script>
```
**Work with module bundler**
```js
var DPlayer = require('DPlayer');
var dp = new DPlayer(option);
```
### Danmaku back-end
**Ready-made API:**
`https://api.prprpr.me/dplayer/`
**Build yourself:**
Required environment
- Node.js
- Mongodb
## Run in development
```

2
package.json
View File

@ -28,7 +28,7 @@
"babel-core": "^6.18.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.13.2",
"css-loader": "^0.25.0",
"css-loader": "^0.26.0",
"exports-loader": "^0.6.3",
"file-loader": "^0.9.0",
"node-sass": "^3.8.0",