vue3 vue-video-player动态切换视频

你可以在Vue组件中使用`vue-video-player`的`src`属性来动态切换视频。首先，你需要将`vue-video-player`导入到你的组件中：

import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' // 引入样式文件
import 'vue-video-player/src/custom-theme.css' // 引入自定义主题样式文件

然后在模板中，你可以使用`v-bind`指令绑定`src`属性值来动态切换视频：

<template>
  <div>
    <video-player ref="player" :options="playerOptions" :src="videoSrc"></video-player>
    <button @click="changeVideo">切换视频</button>
  </div>
</template>

在Vue实例中，你需要定义`videoSrc`和`playerOptions`属性以及`changeVideo`方法来实现切换视频的逻辑：

export default {
  data() {
    return {
      videoSrc: 'http://example.com/video1.mp4',
      playerOptions: {
        autoplay: true,
        controls: true,
        preload: 'auto',
        muted: false,
        language: 'zh-CN',
        techOrder: ['html5', 'flash']
      }
    }
  },
  methods: {
    changeVideo() {
      this.videoSrc = 'http://example.com/video2.mp4'
      this.$refs.player.load() // 重新加载视频
    }
  },
  components: {
    VideoPlayer
  }
}

在`changeVideo`方法中，你可以修改`videoSrc`属性为新视频的URL，并调用`load()`方法重新加载视频。这样，每次点击“切换视频”按钮时，视频就会被切换为新的URL所对应的视频。