|
|
@@ -0,0 +1,248 @@
|
|
|
+# DPlayer
|
|
|
+
|
|
|
+[](https://www.npmjs.com/package/dplayer)
|
|
|
+[](https://cdnjs.com/libraries/dplayer)
|
|
|
+[](https://github.com/DIYgod/DPlayer/blob/master/LICENSE)
|
|
|
+[](https://david-dm.org/DIYgod/DPlayer#info=devDependencies)
|
|
|
+[](https://www.npmjs.com/package/dplayer)
|
|
|
+[](https://travis-ci.org/DIYgod/DPlayer)
|
|
|
+[](https://www.anotherhome.net/)
|
|
|
+
|
|
|
+> Wow, such a lovely HTML5 danmaku video player
|
|
|
+
|
|
|
+## Introduction
|
|
|
+
|
|
|
+[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
|
|
|
+
|
|
|
+
|
|
|
+## Install
|
|
|
+
|
|
|
+```
|
|
|
+$ npm install dplayer --save
|
|
|
+```
|
|
|
+
|
|
|
+## CDN
|
|
|
+
|
|
|
+[cdnjs](https://cdnjs.com/libraries/dplayer)
|
|
|
+
|
|
|
+[BootCDN](http://www.bootcdn.cn/dplayer/)
|
|
|
+
|
|
|
+## Usage
|
|
|
+
|
|
|
+### HTML structure
|
|
|
+
|
|
|
+```HTML
|
|
|
+<div id="player1" class="dplayer"></div>
|
|
|
+<!-- ... -->
|
|
|
+<script src="dist/DPlayer.min.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+### Options
|
|
|
+
|
|
|
+```JS
|
|
|
+var dp = new DPlayer({
|
|
|
+ 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
|
|
|
+ + `dp.vidio.paused` // Returns whether the video paused
|
|
|
+ + 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
|
|
|
+
|
|
|
+### HLS support (Live Video, M3U8 format)
|
|
|
+
|
|
|
+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 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
|
|
|
+- Redis
|
|
|
+
|
|
|
+### Bilibili danmaku and video link
|
|
|
+
|
|
|
+**Danmaku**
|
|
|
+
|
|
|
+API:
|
|
|
+
|
|
|
+`https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】`
|
|
|
+
|
|
|
+or `https://api.prprpr.me/dplayer/bilibili?cid=【bilibili视频cid】`
|
|
|
+
|
|
|
+```JS
|
|
|
+var option = {
|
|
|
+ danmaku: {
|
|
|
+ // ...
|
|
|
+ addition: ['https://api.prprpr.me/dplayer/bilibili?aid=【bilibili视频AV号】']
|
|
|
+ }
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+**Video link**
|
|
|
+
|
|
|
+API:
|
|
|
+
|
|
|
+`https://api.prprpr.me/dplayer/video/bilibili?aid=【bilibili视频AV号】`
|
|
|
+
|
|
|
+or `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);
|
|
|
+```
|
|
|
+
|
|
|
+## Run in development
|
|
|
+
|
|
|
+```
|
|
|
+$ npm install
|
|
|
+$ npm run dev
|
|
|
+```
|
|
|
+
|
|
|
+## Make a release
|
|
|
+
|
|
|
+```
|
|
|
+$ npm install
|
|
|
+$ npm run build
|
|
|
+```
|
|
|
+
|
|
|
+## Related Projects
|
|
|
+
|
|
|
+- [DPlayer-for-typecho](https://github.com/volio/DPlayer-for-typecho)
|
|
|
+
|
|
|
+- [Hexo-tag-dplayer](https://github.com/NextMoe/hexo-tag-dplayer)
|
|
|
+
|
|
|
+- [DPlayer_for_Z-BlogPHP](https://github.com/fghrsh/DPlayer_for_Z-BlogPHP)
|
|
|
+
|
|
|
+- [纸飞机视频区插件(DPlayer for Discuz!)](https://coding.net/u/Click_04/p/video/git)
|
|
|
+
|
|
|
+- [dplayer_py_backend](https://github.com/dixyes/dplayer_py_backend)
|
|
|
+
|
|
|
+- [dplayer_lua_backend](https://github.com/dixyes/dplayer_lua_backend)
|
|
|
+
|
|
|
+- [DPlayer for WordPress](https://github.com/BlueCocoa/DPlayer-WordPress)
|
|
|
+
|
|
|
+## LICENSE
|
|
|
+
|
|
|
+[The Star And Thank Author License (SATA)](https://github.com/DIYgod/DPlayer/blob/master/LICENSE)
|
DIYgod