vant 使用上传视频组件获取视频时长

最新推荐文章于 2025-07-01 17:05:39 发布

原创最新推荐文章于 2025-07-01 17:05:39 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vant上传视频 #vue获取视频时长 #获取时长 #audio时长

该博客探讨了如何在上传视频进行活体检测时，通过隐藏audio标签来控制视频时长，以减轻服务器压力。在前端实现中，使用van-uploader组件捕获视频，并在beforeRead事件中获取音频时长，为活体检测做好准备。

场景需求如下：

上传视频获取用于活体检测，需要控制时长，避免服务器压力

实际上audio这个标签需要隐藏起来（不需要显示他只要他的时长）

<div class="transcribeVideo">
   <audio id="audioId" controls autoplay loop></audio> 
   <van-uploader accept="video/*" capture="camera" :before-read="beforeRead">
     <van-button icon="video-o" type="primary" block>开始识别</van-button>
   </van-uploader>
</div>

methods: {
   beforeRead(file) {
      console.log(file);
      let inputFile = document.querySelector(".van-uploader__input").files[0];
      let url = URL.createObjectURL(inputFile);
      let audio =document.getElementById("audioId");
      audio.src = url; 
      audio.addEventListener("canplay", function () {
         console.log(parseInt(audio.duration));
      });
   }
},