Use the video tag in vue3 for video playback

1. Introduce the video tag and add related parameters

<video
    ref="videoRef"
    :src="videoUrl"
    width="650"
    height="400"
    autoplay
    controls
    @timeupdate="handleTimeUpdate"
></video>
 <!--
    src: 视频路径
    width: 视频宽度
    height: 视频高度
    autoplay: 是否自动播放
    controls: 是否显示控制条
    @timeupdate: 视频播放时触发(获取视频播放的时间)
  -->

2. Obtain the video playback address through the interface, and support downloading

//播放
const handlePlayVideo = (data) => {
  videoUrl.value = data?.baseUrl;
};

//下载
const handleDownload = (data) => {
  window.open(data?.baseUrl, "_blank");
};

3. Set css to hide the progress bar of the video tag

video::-webkit-media-controls-timeline {
  display: none;
}