通过props传入视频的src，用Vue3-video-play写一个播放组件

首先，需要安装Vue3-video-play这个插件：

npm install vue3-video-play --save

然后，在父组件中引入该插件和视频文件，并传入props：

<template>
  <div>
    <VideoPlayer :src="videoSrc" />
  </div>
</template>

<script>
import VideoPlayer from 'vue3-video-play'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      videoSrc: 'your-video-src'
    }
  }
}
</script>

最后，在VideoPlayer组件中使用Vue3-video-play的Player组件实现视频播放：

<template>
  <div class="video-player">
    <Player :src="src" :autoplay="autoplay" :controls="controls" />
  </div>
</template>

<script>
import { Player } from 'vue3-video-play'

export default {
  components: {
    Player
  },
  props: {
    src: { type: String, required: true },
    autoplay: { type: Boolean, default: true },
    controls: { type: Boolean, default: true }
  }
}
</script>

<style>
.video-player {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; // 16:9 的比例
  position: relative;
}

.video-player video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

这样，我们就可以在父组件中传入视频的src，然后在VideoPlayer组件中使用Vue3-video-play的Player组件实现视频的播放了。