js截取视频第一帧_学学javascript如何截取视频第一帧

JavaScript截取视频第一帧

一、背景

在企业资料的开发中，除了涉及到视频上传之外，还需要使用视频中的第一帧或者或许几帧作为视频封面展示。

产生的问题：

因此，JS截取视频第一帧的难点就此诞生，但是查阅了资料发现，网上提供的资料无外乎俩种，第一种是 wasm + ffmpeg 配合后端去截取，第二种是JS自行截取。优缺点也是显而易见的，第一种，配合成本比较高，而且不是很灵活；第二种可以满足一般条件下的使用，但是会有兼容问题(IE再见)以及截取黑屏的问题。

二、wasm + ffmpeg

这种方式优缺点也是显而易见的，配合成本比较高，而且会造成web内存的急剧飙升，但是支持的视频种类已经截取的帧数是很灵活的；由于涉及到服务端，具体可以参考 wasm + ffmpeg 截取视频。

三、JavaScript 前端截取

这里前端截取的话就需要了解 video、canvas 标签的兼容性和响应事件了。而且对IE可能不是那么友好。

1. canvas的知识这里不做过多补充，下面主要看一下video标签的响应事件有哪些：

执行结果

根据顺序，第一个被触发的竟然是 timeupdate 事件，按设想来说，最先执行的应该是 loadedmetadata，元数据加载完毕。关于这一点，在MDN上没有明确的说明࿰