关于javascript: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>