|
|
@@ -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
|
|
|
|
|
|
```
|
DIYgod