vue视频播放组件之vue-mini-player

1、vue-mini-player安装：

      npm install vue-mini-player -S

2、封装视频播放组件

     

<template>
  <div class="qun-video">
    <VueMiniPlayer :video="video" />
  </div>
</template>
<script>
export default {
  name: 'QunVideo',
  data() {
    return {
      video: {
        url: 'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4',
        cover: 'https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png'
      }
    };
  },
  watch: {},
  computed: {},
  filters: {},
  methods: {},
  created() {},
  mounted() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
};
</script>
<style lang="scss" scoped>
.qun-video {
  max-width: 500px;
  width: 100%;
  min-width: 300px;
  height: 15em;
  margin: 0 auto;
}
</style>

3、直接引用组件并可自定义播放地址

<template>
  <div>
    <section class="main">
      <QunVideo  />
    </section>
  </div>
</template>

<script>
import QunVideo from './components/QunVideo.vue';

export default {
  name: 'app',
  components: {
    QunVideo
  }
};
</script>

源码链接：https://download.csdn.net/download/metooyoume/12668187