1、装置依赖

npm i vue-mini-player // ^0.2.1

2、全局引入

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

3、组件应用

<template>  <div class="list">    <div class="list-item" v-for="(item, index) in vlist" :key="item.id">      <vueMiniPlayer        :ref="item.name"        :video="item.video"        @ready="ready"        @fullscreen="handleFullscreen(index)"        @videoPlay="videoPlay"      />    </div>  </div></template><script>export default {  data() {    return {      vlist: [],      list: [        {          id: 1,          url: require("./assets/1.mp4")        },        {          id: 2,          url: require("./assets/2.mp4")        },        {          id: 3,          url: require("./assets/3.mp4")        },        {          id: 4,          url: require("./assets/2.mp4")        },        {          id: 5,          url: require("./assets/1.mp4")        },      ],      video: {        mutex: false,        muted: true,        loop: false,        preload: "auto",        poster: "",        volume: 1,        autoplay: true,      },    };  },  computed: {    $video() {      return this.vlist.map((items) => {        return this.$refs[items.name][0].$video;      });    },  },  mounted() {    this.vlist = this.list.map((item, index) => {      item.name = `vueMiniPlayer${index}`;      let obj = { ...this.video, ...item };      item.video = obj;      return item;    });  },  methods: {    ready() {      console.log("ready");    },    videoPlay() {      console.log(this.$video[0].muted);      // this.$video.muted= false    },    handleFullscreen(params) {      console.log(this.$video[0]);      console.log(params);    },  },};</script><style scoped>.list {  width: 100%;  display: flex;  flex-wrap: wrap;}.list-item {  width: 32%;  margin: 10px;}</style>