mui-player vue视频插件二次封装
mui-player 的使用
·
1. 使用npm安装
npm i mui-player --save
npm i mui-player-desktop-plugin //pc端扩展
2. component (videomuiPlayer.vue)
<template>
<div id="mui-player"></div>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import MuiPlayerDesktopPlugin from 'mui-player-desktop-plugin' //pc端扩展
export default {
name: "videomuiPlayer",
props: ['videourl'],
data() {
return {
mp: ''
}
},
watch: {
videourl() {
//切换视频地址
this.mp.reloadUrl(this.videourl.videoUrl)
// this.mp.reloadUrl()
}
},
methods: {
init() {
const that = this
that.mp = new MuiPlayer({
container: '#mui-player',
title: '',
poster: that.videourl.videoImage,
src: that.videourl.videoUrl,
autoplay: true,
plugins: [
new MuiPlayerDesktopPlugin({
leaveHiddenControls: true,
customSetting: [
{
functions: '清晰度',
model: 'select',
show: true,
zIndex: 0,
childConfig: [
// {functions: '蓝光1080P'},
// {functions: '超清'},
{functions: '超清', selected: true},
// {functions: '标清'},
],
onToggle: function (data, selected, back) {
// Action
}
}
],
})
]
})
},
},
}
</script>
<style scoped>
</style>
3. component 使用
<!--html部分-->
<videomuiPlayer :videourl="videourltime"></videomuiPlayer>
//js部分
import videomuiPlayer from '@/components/videomuiPlayer'
export default {
...
components: {videomuiPlayer},
data() {
return {
videourltime: {}, //传给组件的值
}
},
}
更多推荐
已为社区贡献1条内容
所有评论(0)