vue弹窗播放静态资源中的视频文件的代码

你可以使用 vue-video-player 插件来播放静态资源中的视频文件。

首先，安装 vue-video-player 插件：

npm install vue-video-player --save

然后，在你的 Vue 组件中使用该插件：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
    <button @click="openModal">打开弹窗</button>
    <div v-show="showModal">
      <button @click="closeModal">关闭弹窗</button>
      <video-player ref="modalVideoPlayer" :options="playerOptions"></video-player>
    </div>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [
          {
            type: 'video/mp4',
            src: 'path/to/video.mp4' // 替换为你的视频文件路径
          }
        ]
      },
      showModal: false
    }
  },
  methods: {
    openModal() {
      this.showModal = true
      this.$nextTick(() => {
        this.$refs.modalVideoPlayer.play()
      })
    },
    closeModal() {
      this.showModal = false
      this.$refs.modalVideoPlayer.pause()
    }
  }
}
</script>

在上面的代码中，我们首先导入 vue-video-player 组件，并在组件中引入。

然后，在 data 中定义了 playerOptions 对象，用于配置视频播放器的选项，包括自动播放、控制条显示和视频源。

在模板中，我们使用 <video-player> 标签来展示视频播放器，并通过 ref 属性引用该播放器。

点击 "打开弹窗" 按钮时，会弹出一个带有视频播放器的弹窗。点击 "关闭弹窗" 按钮时，会关闭弹窗并暂停视频播放。

注意替换 src 属性中的 path/to/video.mp4 为你的视频文件的路径。

希望这可以帮助到你