Dx-BPlayer

This is a simple HTML5 video player based on Vue.

Introduction

Install

npm install dx-bplayer -S
or
yarn add dx-bplayer

Use

# main.js
import DxBPlayer from 'dx-bplayer'
import 'dx-bplayer/lib/dx-bplayer.css'
Vue.use(DxBPlayer)

<template>
  <DxBPlayer ref="DxBPlayer" :playerOptions="options" @created="created" />
</template>
<script>
  export default {
    data () {
      return {
        options: {
          url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
          cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png',
          muted: false,
          loop: false,
          preload: 'auto'
        }
      }
    },
    computed(){
      $video(){
        return this.$refs.DxBPlayer.$video
      }
    },
    methods:{
      created(){}
    }
  }
</script>

Props

Name	Type	Default	Description
playerOptions	Object	--	all player options
playerOptions.url	String	--	video resources
playerOptions.cover	String	--	video cover
playerOptions.preload	String	--	video preload
playerOptions.muted	Boolean	false	video mute
playerOptions.volume	Number	1	video volume
playerOptions.loop	Boolean	false	video loop
playerOptions.autoplay	Boolean	false	video autoplay
playerOptions.scrollFixed	Boolean	false	video scrolling fixed

Event

Name	Description
created	component created
mounted	component mounted
beforeDestroy	component beforeDestroy
destroyed	component destroyed
ready	video init
play	video play
pause	video pause
clearMode	video clearMode
canplay	video canplay
wait	video waiting
fullscreen	video fullscreen
fixed	video fixed change

License

This content is released under the MIT License.