上传本地视频前，获取视频时长，并以视频第一秒作为封面

最新推荐文章于 2024-07-29 18:09:40 发布

闲岁️

最新推荐文章于 2024-07-29 18:09:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：技术功能文章标签：音视频前端 javascript 经验分享

本文链接：https://blog.csdn.net/weixin_48027328/article/details/128534974

该文章介绍了如何在本地选择视频后，利用JavaScript获取视频时长，并提取视频第一秒作为封面图片，而非依赖上传后的视频地址。通过使用elementUI的el-upload组件，在beforeUpload钩子中处理file对象来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文介绍的是，在本地添加了需要上传的视频文件后，先获取到视频的可播放时长，并且以视频的第一秒画面作为封面图片的实现方法，之后再调用上传接口，将相关数据进行上传。【网上搜到的大部分都是先上传文件，再使用接口返回的视频地址获取封面，不符合我的需求，所以作此文进行整理】
可以先使用上传组件获取到上传的视频文件对象，如elementUI或Antd的Upload组件。
此处以elementUI的el-upload组件举例，在beforeUpload方法中，先获取到file对象，然后进行以下代码操作。

const canvas = document.getElementById("mycanvas"); // 获取 canvas 对象
const ctx = canvas.getContext("2d")

最低0.47元/天解锁文章

200万优质内容无限畅学