vue3+video.js鼠标移入出播放暂停和帧随鼠标变化

初入门一个 视频流。之前了解到 视频这块 有两种做法。一种是 鼠标移入移出来控制视频播放和暂停。一种是视频帧随鼠标在元素移动的位置通过js 计算百分比来获取对应视频的时长数且显示该帧。

简单的例子
<template>
  <div>
    <video @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" @mousemove="handleMouseMove"
    style="width:500px;max-height:400px ;" ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script setup lang="ts">
import 'video.js/dist/video-js.css'
import videojs from 'video.js';
import { onMounted,ref,onUnmounted  } from 'vue'

const player = ref<any>(null) 
onMounted(()=>{
//实例化一个 player 并指定 src
  player.value = videojs(videoPlayer.value, {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: '/src/assets/Raindrops_Videvo.mp4',
            type: 'video/mp4',
          }
        ]
      }, () => {
    player.value.log("play.....")
  });
})

onUnmounted(() => {
  if (player.value) {
    player.value.dispose()
  }
})
//鼠标移入 视频播放
const  handleMouseEnter= () => {
  // if (player.value) {
  //   player.value.play()
  // }
}
//鼠标移出 视频暂停
const handleMouseLeave= () => {
  // if (player.value) {
  //   player.value.pause()
  // }
}
//鼠标移动
const handleMouseMove = (event:any)=>{
//获取当前播放元素的 width
  const videoWidth = player.value.el().clientWidth
// layerX 就是鼠标对应的 横轴的数。
// 获取对应的百分比
  const ratio = event.layerX / videoWidth
//获取时长
  const videoDuration = player.value.duration()
//取末尾两位，因为视频是 精确单位秒 2:00
  player.value.currentTime((videoDuration * ratio).toFixed(2))
}
</script>

以上两个功能不能一起使用。感觉会很一卡一卡。
总结: 目前使用第二种的时候 视频偶尔会卡一下。后期解决了再过来更新，有大佬知道什么原因欢迎指教