Vue-peak-dp NPM

Vue-DPlayer

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

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)
    }