自带截图的视频播放插件 而不是自定义的

如果您想要使用一个自带截图功能的视频播放插件，Vue3社区中有几个现成的解决方案可供选择，如`vue-vimeo-player`和`vue-youtube-player`等第三方库。这些插件通常集成了YouTube或Vimeo API，并提供了一些额外的功能，包括截图。

例如，`vue-vimeo-player`可以轻松地嵌入Vimeo视频并获取截图，安装如下：

npm install vue-vimeo-player --save

在组件中：

<template>
  <vimeo-player
    :id="playerId"
    :video-id="videoId"
    :width="computedWidth"
    :height="computedHeight"
    :autoplay="true"
    @ready="onReady"
    @pause="onPause"
    @play="onPlay"
  ></vimeo-player>
</template>

<script setup>
import VimeoPlayer from '@xiaokai/vimeo-player';

const playerId = 'my-vimeo-player';
const videoId = 'your_vimeo_video_id';
let computedWidth = '100%';
let computedHeight = 'auto';

const onReady = (event) => {
  event.player.getSnapshot().then((screenshotUrl) => {
    console.log('Screenshot URL:', screenshotUrl);
  });
};
// ...其他事件处理函数
</script>

<style scoped>
/* 样式可按需添加 */
</style>

在这个例子中，`getSnapshot`方法会在视频准备就绪时触发，返回截图URL。