mui-player vue视频插件二次封装

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: {}, //传给组件的值
    	}
  	},	
  }