Vue-DPlayer

peak

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.