From 331921b9a702b9b7df5f3d409809ce4511558f8f Mon Sep 17 00:00:00 2001 From: DIYgod Date: Mon, 28 Nov 2016 12:28:51 +0800 Subject: [PATCH] add docs --- README.md | 186 +-------------------------------------------------- package.json | 2 +- 2 files changed, 3 insertions(+), 185 deletions(-) diff --git a/README.md b/README.md index 38540b5..384b4a1 100644 --- a/README.md +++ b/README.md @@ -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 -
- - -``` - -### 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 -
- - - - - -``` - -**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 -
- - - - - -``` - -**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 ``` diff --git a/package.json b/package.json index d5b8786..e57d908 100644 --- a/package.json +++ b/package.json @@ -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",