JavaScript截取视频第一帧
一、背景
在企业资料的开发中,除了涉及到视频上传之外,还需要使用视频中的第一帧或者或许几帧作为视频封面展示。
产生的问题:
因此,JS截取视频第一帧的难点就此诞生,但是查阅了资料发现,网上提供的资料无外乎俩种,第一种是 wasm + ffmpeg 配合后端去截取,第二种是JS自行截取。优缺点也是显而易见的,第一种,配合成本比较高,而且不是很灵活;第二种可以满足一般条件下的使用,但是会有兼容问题(IE再见)以及截取黑屏的问题。
二、wasm + ffmpeg
这种方式优缺点也是显而易见的,配合成本比较高,而且会造成web内存的急剧飙升,但是支持的视频种类已经截取的帧数是很灵活的;由于涉及到服务端,具体可以参考 wasm + ffmpeg 截取视频。
三、JavaScript 前端截取
这里前端截取的话就需要了解 video、canvas 标签的兼容性和响应事件了。而且对IE可能不是那么友好。
1. canvas的知识这里不做过多补充,下面主要看一下video标签的响应事件有哪些:
执行结果
根据顺序,第一个被触发的竟然是 timeupdate 事件,按设想来说,最先执行的应该是 loadedmetadata,元数据加载完毕。关于这一点,在MDN上没有明确的说明