vue3中使用video标签进行视频播放

1. 引入video标签，并添加相关参数

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

2. 通过接口获取到视频播放地址，并支持下载

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

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

3. 设置css,可以对video标签的进度条进行隐藏

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