Vue-DPlayer

A Vue 2.x video player component based on DPlayer.

Live Demo

Install

npm install vue-dplayer -S

Usage

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:

<d-player  @play="play"></d-player>

export default {
    methods: {
      play() {
        console.log('play callback')
      }
    }

API

you can use all DPlayer APIs

Example:

<d-player ref="player"></d-player>

export default {
    mounted() {
      const player = this.$refs.player.dp
      player.play()
      setTimeout(() => {
        player.pause()
      }, 2000)
    }

Related

• vue-aplayer
• DPlayer

Development

• yarn example: Run example in development mode
• yarn deploy: Deploy example to gh-pages
• yarn build:cjs: Build component in commonjs format
• yarn build:umd: Build component in umd format
• yarn build: Build component in both format
• yarn lint: Run eslint

Check out your npm scripts, it's using vbuild under the hood.

Generated by create-vue-app

License

This content is released under the MIT License.