如何用JavaScript准确获取上传视频时长及预览第一帧画面？

本文共计1130个文字，预计阅读时间需要5分钟。

目录+前言+获取视频时长+获取第一帧画面+结语+前言+当我们开发一个后台系统的音频管理模块时，通常需要将我们上传的视频做一个前端的前置处理。首先，我们需要对文件的大小进行限制，。

目录

• 前言
• 获取视频时长
• 获取第一帧画面
• 结语

前言

当我们做一个后台系统的音频管理模块时，通常需要将我们上传的视频做一个前端的提前处理。首先是我们对于文件的大小要限制，文件类型做限制，然后还会有些特定的要求，比如自动去读取文件的一些信息，传递给后端。当然这些可以在后端进行完成，但是相对而言，将资源的消耗放在前端这一块是会相对减轻后端压力的。这里主要介绍要如何获取前端的第一帧画面和视频的时长，画面可以辅助我们设置新建信息的视频封面图，时长能让用户更直观地感觉到文件的准确性和大小。

获取视频时长

获取时长比第一帧画面的获取相对容易一些，但是两者有一个共同的需要，那就是需要在我们的html代码中添加video标签，并且将我们想要获取信息的视频地址放到标签的链接中。

获取时长的话，只需要给视频element添加一个监听事件，loadedmetadata。在这个监听事件中我们可以获取到audioElement对象，在该对象中便有视频时长的参数。