vue3，使用vue3写法编写。 使用的视频播放插件 要绝对能用的，宽高能自适应，自动播放，播放倍速，截图的插件

Vue3是一个用于构建用户界面的现代JavaScript框架，它专注于组件化开发和响应式数据绑定。为了实现在Vue3项目中集成一个功能丰富的视频播放插件，可以考虑使用`VPlayer`或`vue-video-player`这样的库。

`VPlayer`是一个轻量级且易于使用的视频播放插件，支持多种播放源、自适应大小、自动播放、播放控制和截图等功能。安装步骤如下：

npm install vplayer --save

在组件文件中引入并使用它：

<template>
  <div class="video-container">
    <v-player :src="videoSrc" :autoPlay="true" :width="computedWidth" :height="computedHeight" @fullscreen="toggleFullScreen"></v-player>
    <button @click="takeScreenshot">截图</button>
  </div>
</template>

<script setup>
import VPlayer from 'vplayer';

const videoSrc = 'your_video_url';
let computedWidth = '100%'; // 根据需求动态设置
let computedHeight = 'auto'; // 自动适应高度

const toggleFullScreen = () => {
  /* 全屏操作 */
};

const takeScreenshot = async () => {
  const screenshot = await VPlayer.getSnapshot();
  /* 处理截图 */
};
</script>

<style scoped>
.video-container {
  position: relative;
}
</style>

在上述代码中，我们设置了`v-player`组件的基本属性，并添加了一个按钮来进行截图操作。`getSnapshot()`方法可用于获取当前播放画面的截图。