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

最新推荐文章于 2024-07-03 16:39:03 发布

blueBings

最新推荐文章于 2024-07-03 16:39:03 发布

阅读量1.3k

点赞数

文章标签： vant上传视频 vue获取视频时长获取时长 audio时长

本文链接：https://blog.csdn.net/mentalitys/article/details/119776676

版权

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

摘要由CSDN通过智能技术生成

场景需求如下：

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

实际上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));
      });
   }
},