0.2.1 • Published 3 years ago
dx-bplayer v0.2.1
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.