基于 Vue 的一个轻量级视频播放组件，适配 PC 和移动端

vue-mini-player使用方法：

安装

npm install vue-mini-player -S

// main.js
import vueMiniPlayer from 'vue-mini-player'
import 'vue-mini-player/lib/vue-mini-player.css'
Vue.use(vueMiniPlayer)

// html部分

 <vueMiniPlayer
 	  ref="vueMiniPlayer"
      :video="video"
      :mutex="true"
      @fullscreen="handleFullscreen"
  />

// js部分

data() {
        return {
            video: {
                url: "http://47.105.206.28/videos/wangkun.mp4",
                cover: "https://i.loli.net/2019/06/06/5cf8c5d9c57b510947.png",
                muted: false,
                loop: false,
                preload: "auto",
                poster: "",
                volume: 1,
                autoplay: false
            }
        };
    },
      computed: {
        $video() {
            return this.$refs.vueMiniPlayer.$video;
        }
    },
     methods: {
        handleFullscreen() {}
    },

效果图如下：

参考链接：https://github.com/webweifeng/vue-mini-player