-> 0.0.1

README.md

@@ -1,33 +1,84 @@
 # Vue-DPlayer
 
-My finest Vue app
+> A Vue 2.x video player component based on [DPlayer](https://github.com/DIYgod/DPlayer).
+
+[Live Demo](https://sinchang.github.io/vue-dplayer/)
 
 ## Install
 
 ```bash
-yarn add Vue-DPlayer
+npm install vue-dplayer -S
 ```
 
 ## Usage
 
 ```js
-import VueDPlayer from 'Vue-DPlayer'
+import VueDPlayer from 'vue-dplayer'
+
+export default {
+  components: {
+    'd-player': VueDPlayer
+  }
+}
+```
+## Props
+
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| autoplay | Boolean | false | autoplay video, not supported by mobile browsers |
+| theme | String | #FADFA3 | theme color |
+| loop | Boolean | true | loop play music |
+| screenshot | Boolean | false | enable screenshot function |
+| hotkey | Boolean | true | binding hot key, including left right and Space |
+| preload | String | 'auto' | the way to load video, can be 'none' 'metadata' or 'auto' |
+| video| Object | `required` | video.url -> video link is required, video.pic -> video poster |
+
+## Events
+
+| Name | Params | Description |
+| ---- | ------ | ----------- |
+| play | none | Triggered when DPlayer start play |
+| pause | none | Triggered when DPlayer paused |
+| canplay | none | Triggered when enough data is available that DPlayer can play |
+| playing | none | Triggered periodically when DPlayer is playing |
+| ended | none | Triggered when DPlayer ended playing |
+| error | none | Triggered when an error occurs |
+
+Example:
+
+```js
+<d-player  @play="play"></d-player>
 
-//... your code
+export default {
+    methods: {
+      play() {
+        console.log('play callback')
+      }
+    }
 ```
 
-## Folder structure
+## API
 
-- `src/`: Source files for this component
-  - `VueDPlayer.vue` The component itself
-- `example/`: Example for demonstrating this component
-  - `index.js`: Entry for the example
-  - `App.vue`: The root component which we use to load this component
-- `vbuild.example.js`: Config file for your example
-- `vbuild.component.js`: Config file for your component
-- `package.json`: App manifest
-- `.editorconfig`: Ensure consistent editor behaivor
-- `.gitignore`: Ignore files we don't need to push
+you can use all DPlayer [APIs](http://dplayer.js.org/docs/#/?id=api)
+
+Example:
+
+```js
+<d-player ref="player"></d-player>
+
+export default {
+    mounted() {
+      const player = this.$refs.player.dp
+      player.play()
+      setTimeout(() => {
+        player.pause()
+      }, 2000)
+    }
+```
+## Related
+
+- [vue-aplayer](https://github.com/SevenOutman/vue-aplayer)
+- [DPlayer](https://github.com/DIYgod/DPlayer)
 
 ## Development
 
@@ -43,3 +94,7 @@ Check out your npm scripts, it's using [vbuild](https://github.com/egoist/vbuild
 ---
 
 Generated by [create-vue-app](https://github.com/egoist/create-vue-app)
+
+# License
+
+This content is released under the [MIT](http://opensource.org/licenses/MIT) License.

example/App.vue

@@ -1,17 +1,26 @@
 <template>
   <div id="app">
-    <d-player :video="video" :autoplay="autoplay" ref="player"></d-player>
+    <h1>Vue-DPlayer</h1>
+    <h2>A Vue 2.x component of <a href="https://github.com/DIYgod/DPlayer" target="_blank">DPlayer</a></h2>
+    <github-badge slug="sinchang/vue-dplayer" />
+    <d-player :video="video"
+              :autoplay="autoplay"
+              @play="play"
+              ref="player">
+    </d-player>
   </div>
 </template>
 
 <script>
   import VueDPlayer from '../src/VueDPlayer.vue'
+  import GitHubBadge from 'vue-github-badge'
 
   export default {
     data() {
       return {
         video: {
-          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'
+          url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4',
+          pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
         },
         autoplay: false
       }
@@ -23,8 +32,14 @@
       //   player.pause()
       // }, 2000)
     },
+    methods: {
+      play() {
+        console.log('play callback')
+      }
+    },
     components: {
-      'd-player': VueDPlayer
+      'd-player': VueDPlayer,
+      'github-badge': GitHubBadge
     }
   }
 </script>
@@ -33,10 +48,41 @@
   body {
     margin: 0;
     padding: 0;
+    text-align: center;
+  }
+
+  a {
+    color: #42b983;
+    text-decoration: none;
   }
 
   .dplayer {
     width: 800px;
     margin: 50px auto;
   }
+
+  h1 {
+    font-size: 54px;
+    color: #42b983;
+    margin: 30px 0 10px;
+  }
+
+  h2 {
+    font-size: 22px;
+    color: #555;
+  }
+
+  @media (max-width: 768px) {
+    .dplayer {
+      width: 90%;
+    }
+
+    h1 {
+      font-size: 30px;
+    }
+
+    h2 {
+      font-size: 16px;
+    }
+  }
 </style>

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "Vue-DPlayer",
-  "description": "My finest Vue app",
-  "version": "0.0.0",
-  "repository": {},
+  "name": "vue-dplayer",
+  "description": "A Vue 2.x video player component based on DPlayer",
+  "version": "0.0.1",
   "main": "dist/Vue-DPlayer.js",
   "files": [
     "dist"
@@ -16,12 +15,26 @@
     "example": "vbuild -c vbuild.example.js -d",
     "deploy": "vbuild -c vbuild.example.js && gh-pages -d dist-example"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sinchang/vue-dplayer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sinchang/vue-dplayer/issues"
+  },
+  "keywords": [
+    "vue",
+    "component",
+    "player"
+  ],
+  "author": "sinchang <[email protected]>",
   "devDependencies": {
     "gh-pages": "^0.12.0",
     "vbuild": "^6.0.0"
   },
   "license": "MIT",
   "dependencies": {
-    "dplayer": "^1.1.4"
+    "dplayer": "^1.1.4",
+    "vue-github-badge": "^1.0.0"
   }
-}
+}

src/VueDPlayer.vue

@@ -7,24 +7,28 @@
   export default {
     props: {
       autoplay: {
-        type: Boolean
+        type: Boolean,
+        default: false
       },
       theme: {
         type: String,
         default: '#FADFA3'
       },
       loop: {
-        type: Boolean
+        type: Boolean,
+        default: true
       },
       lang: {
         type: String,
         default: 'zh'
       },
       screenshot: {
-        type: Boolean
+        type: Boolean,
+        default: false
       },
       hotkey: {
-        type: Boolean
+        type: Boolean,
+        default: true
       },
       preload: {
         type: String,
@@ -33,12 +37,6 @@
       video: {
         type: Object,
         required: true,
-        default() {
-          return {
-            url,
-            pic
-          }
-        },
         validator(value) {
           return typeof value.url === 'string'
         }
@@ -65,6 +63,30 @@
           type: 'normal'
         }
       })
+
+      player.on('play', () => {
+        this.$emit('play')
+      })
+
+      player.on('pause', () => {
+        this.$emit('pause')
+      })
+
+      player.on('canplay', () => {
+        this.$emit('canplay')
+      })
+
+      player.on('playing', () => {
+        this.$emit('playing')
+      })
+
+      player.on('ended', () => {
+        this.$emit('ended')
+      })
+
+      player.on('error', () => {
+        this.$emit('error')
+      })
     }
   }
 </script>

vbuild.example.js

@@ -3,7 +3,7 @@
 module.exports = {
   entry: 'example/index.js',
   dist: 'dist-example',
-  homepage: '/vue-dplayer',
+  homepage: '/vue-dplayer/',
   port: 5000,
   html: {
     title: 'Vue-DPlayer'