├── .gitignore
├── bili.config.js
├── example
    ├── index.js
    ├── index.html
    └── App.vue
├── .editorconfig
├── src
    └── index.js
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | 
5 | # produced by vbuild
6 | example-dist
7 | dist
8 | yarn—error.log
9 | 


--------------------------------------------------------------------------------
/bili.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   banner: true,
3 |   format: ['umd', 'umd-min', 'cjs', 'es'],
4 |   postcss: {},
5 | }
6 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import VueDPlayer from '../src/index'
 4 | 
 5 | Vue.use(VueDPlayer)
 6 | 
 7 | new Vue({
 8 |   el: '#app',
 9 |   render: h => h(App)
10 | })
11 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | [*]
 3 | indent_style = space
 4 | indent_size = 2
 5 | end_of_line = lf
 6 | charset = utf-8
 7 | trim_trailing_whitespace = true
 8 | insert_final_newline = true
 9 | [*.md]
10 | 
11 | trim_trailing_whitespace = false
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import DPlayer from 'dplayer'
 2 | import '../node_modules/dplayer/dist/DPlayer.min.css'
 3 | 
 4 | const VueDPlayer = {
 5 |   props: {
 6 |     options: {
 7 |       type: Object
 8 |     }
 9 |   },
10 |   data() {
11 |     return {
12 |       dp: null
13 |     }
14 |   },
15 |   mounted() {
16 |     this.options.container = this.$el
17 |     const player = this.dp = new DPlayer(this.options)
18 |     const events = player.events
19 |     Object.keys(events).forEach(item => {
20 |       if (item === 'events') {
21 |         return false
22 |       } else {
23 |         events[item].forEach(event => {
24 |           player.on(event, () => this.$emit(event))
25 |         })
26 |       }
27 |     })
28 |   },
29 |   install (Vue, { name = 'd-player' } = {}) {
30 |     Vue.component(name, this)
31 |   },
32 |   render(h) {
33 |     return h('div', {
34 |       class: 'dplayer'
35 |     }, [])
36 |   }
37 | }
38 | 
39 | if (typeof window !== 'undefined' && window.Vue) {
40 |   window.VueDPlayer = VueDPlayer
41 | }
42 | 
43 | export default VueDPlayer
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-dplayer",
 3 |   "description": "A Vue 2.x video player component based on DPlayer",
 4 |   "version": "0.0.10",
 5 |   "main": "dist/vue-dplayer.js",
 6 |   "files": [
 7 |     "dist"
 8 |   ],
 9 |   "scripts": {
10 |     "test": "echo lol",
11 |     "build:example": "poi build example/index.js",
12 |     "build": "bili",
13 |     "example": "poi example/index.js",
14 |     "prepublishOnly": "npm run build"
15 |   },
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/sinchang/vue-dplayer.git"
19 |   },
20 |   "bugs": {
21 |     "url": "https://github.com/sinchang/vue-dplayer/issues"
22 |   },
23 |   "keywords": [
24 |     "vue",
25 |     "component",
26 |     "player"
27 |   ],
28 |   "poi": {
29 |     "dist": "example-dist"
30 |   },
31 |   "author": "sinchang <sinchangwen@gmail.com>",
32 |   "devDependencies": {
33 |     "bili": "2.0.0",
34 |     "poi": "9.6.13"
35 |   },
36 |   "license": "MIT",
37 |   "dependencies": {
38 |     "dplayer": "^1.22.2",
39 |     "vue-github-badge": "1.0.1"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8 |   <title>Demo</title>
 9 |   <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
10 |   <script src="../dist/vue-dplayer.js"></script>
11 |   <link rel="stylesheet" href="../dist/vue-dplayer.css">
12 | </head>
13 | 
14 | <body>
15 |   <div id="app">
16 |     <d-player :options="options"></d-player>
17 |   </div>
18 |   <script>
19 |     new Vue({
20 |       el: '#app',
21 |       components: {
22 |         'd-player': VueDPlayer
23 |       },
24 |       data: {
25 |         options: {
26 |           video: {
27 |             url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
28 |             pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
29 |           },
30 |           autoplay: false,
31 |           contextmenu: [{
32 |             text: 'GitHub',
33 |             link: 'https://github.com/MoePlayer/vue-dplayer'
34 |           }]
35 |         },
36 |       }
37 |     })
38 | 
39 |   </script>
40 | </body>
41 | 
42 | </html>
43 | 
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue-DPlayer
 2 | 
 3 | > A Vue 2.x video player component based on [DPlayer](https://github.com/DIYgod/DPlayer).
 4 | 
 5 | [![NPM version](https://img.shields.io/npm/v/vue-dplayer.svg?style=flat)](https://npmjs.com/package/vue-dplayer) 
 6 | [![Vue 2.x](https://img.shields.io/badge/Vue-2.x-brightgreen.svg)](https://vuejs.org/v2/guide/)
 7 | [![NPM downloads](https://img.shields.io/npm/dm/vue-dplayer.svg?style=flat)](https://npmjs.com/package/vue-dplayer) 
 8 | 
 9 | [Live Demo](https://dplayer.netlify.com/)
10 | 
11 | ## Install
12 | 
13 | ```bash
14 | npm install vue-dplayer -S
15 | ```
16 | 
17 | ## Usage
18 | 
19 | CDN: https://unpkg.com/vue-dplayer@latest/dist/
20 | 
21 | ```js
22 | import VueDPlayer from 'vue-dplayer'
23 | import 'vue-dplayer/dist/vue-dplayer.css'
24 | 
25 | export default {
26 |   components: {
27 |     'd-player': VueDPlayer
28 |   }
29 | }
30 | ```
31 | 
32 | ## Props
33 | [Options Doc](http://dplayer.js.org/#/home?id=options)
34 | 
35 | | Name | Type | Default | Description |
36 | | ---- | ---- | ------- | ----------- |
37 | | options | Object | -- | all player options |
38 | 
39 | ## Events
40 | [Event binding Doc](http://dplayer.js.org/#/home?id=event-binding)
41 | 
42 | Example:
43 | 
44 | ```js
45 | <d-player @play="play"></d-player>
46 | 
47 | export default {
48 |     methods: {
49 |       play() {
50 |         console.log('play callback')
51 |       }
52 |     }
53 | ```
54 | 
55 | ## API
56 | 
57 | you can use all DPlayer [APIs](http://dplayer.js.org/#/home?id=api)
58 | 
59 | Example:
60 | 
61 | ```js
62 | <d-player ref="player"></d-player>
63 | 
64 | export default {
65 |     mounted() {
66 |       const player = this.$refs.player.dp
67 |       player.play()
68 |       setTimeout(() => {
69 |         player.pause()
70 |       }, 2000)
71 |     }
72 | ```
73 | ## Related
74 | 
75 | - [vue-aplayer](https://github.com/SevenOutman/vue-aplayer)
76 | - [DPlayer](https://github.com/DIYgod/DPlayer)
77 | 
78 | # License
79 | 
80 | This content is released under the [MIT](http://opensource.org/licenses/MIT) License.
81 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>Vue-DPlayer</h1>
 4 |     <h2>A Vue 2.x component of <a href="https://github.com/DIYgod/DPlayer" target="_blank">DPlayer</a></h2>
 5 |     <github-badge slug="sinchang/vue-dplayer" />
 6 |     <d-player :options="options"
 7 |               @play="play"
 8 |               ref="player">
 9 |     </d-player>
10 |     <button class="btn btn-primary" @click="switchHandle">switch</button>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 |   import GitHubBadge from 'vue-github-badge'
16 | 
17 |   export default {
18 |     data() {
19 |       return {
20 |         options: {
21 |           video: {
22 |             url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
23 |             pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
24 |           },
25 |           autoplay: false,
26 |           contextmenu: [
27 |               {
28 |                   text: 'GitHub',
29 |                   link: 'https://github.com/MoePlayer/vue-dplayer'
30 |               }
31 |           ]
32 |         },
33 |         player: null,
34 |         }
35 |     },
36 |     mounted() {
37 |       this.player = this.$refs.player.dp
38 |     },
39 |     methods: {
40 |       play() {
41 |         console.log('play callback')
42 |       },
43 |       switchHandle() {
44 |         this.player.switchVideo({
45 |           url: 'http://static.smartisanos.cn/common/video/video-jgpro.mp4'
46 |         })
47 |       }
48 |     },
49 |     components: {
50 |       'github-badge': GitHubBadge
51 |     }
52 |   }
53 | </script>
54 | 
55 | <style>
56 |   body {
57 |     margin: 0;
58 |     padding: 0;
59 |     text-align: center;
60 |   }
61 | 
62 |   a {
63 |     color: #42b983;
64 |     text-decoration: none;
65 |   }
66 | 
67 |   .dplayer {
68 |     width: 800px;
69 |     margin: 50px auto;
70 |   }
71 | 
72 |   h1 {
73 |     font-size: 54px;
74 |     color: #42b983;
75 |     margin: 30px 0 10px;
76 |   }
77 | 
78 |   h2 {
79 |     font-size: 22px;
80 |     color: #555;
81 |   }
82 | 
83 |   @media (max-width: 768px) {
84 |     .dplayer {
85 |       width: 90%;
86 |     }
87 | 
88 |     h1 {
89 |       font-size: 30px;
90 |     }
91 | 
92 |     h2 {
93 |       font-size: 16px;
94 |     }
95 |   }
96 | </style>
97 | 


--------------------------------------------------------------------------------