vue打开页面同时播放多个视频

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>