本文摘自PHP中文网,作者coldplay.xixi,侵删。
相关学习推荐:javascript视频教程
JavaScript截取视频第一帧
一、背景
在企业资料的开发中,除了涉及到视频上传之外,还需要使用视频中的第一帧或者或许几帧作为视频封面展示。
产生的问题:
因此,JS截取视频第一帧的难点就此诞生,但是查阅了资料发现,网上提供的资料无外乎俩种,第一种是 wasm + ffmpeg 配合后端去截取,第二种是JS自行截取。优缺点也是显而易见的,第一种,配合成本比较高,而且不是很灵活;第二种可以满足一般条件下的使用,但是会有兼容问题(IE再见)以及截取黑屏的问题。
二、wasm + ffmpeg
这种方式优缺点也是显而易见的,配合成本比较高,而且会造成web内存的急剧飙升,但是支持的视频种类已经截取的帧数是很灵活的;由于涉及到服务端,具体可以参考 wasm + ffmpeg 截取视频。
三、JavaScript 前端截取
这里前端截取的话就需要了解 video、canvas 标签的兼容性和响应事件了。而且对IE可能不是那么友好。
1. canvas的知识这里不做过多补充,下面主要看一下video标签的响应事件有哪些:
执行结果
根据顺序,第一个被触发的竟然是 timeupdate 事件,按设想来说,最先执行的应该是 loadedmetadata,元数据加载完毕。关于这一点,在MDN上没有明确的说明,但是可以推理一下:
当 currentTime 更新时会触发 timeupdate 事件
结论:虽然最先触发,但是此时视频文件尚未加载,截取的是 canvas 的无内容本身。注:timeupdate 事件根据使用的系统不同,每秒触发4-66次,且由于触发频率高,单位过小(毫秒级别),事件响应需要延迟等原因,无法完全精准的控制。
loadedmetadata 上文提到,元数据加载完毕之后即触发,但数据中并不包括视频文件本身。结论:如果视频文件较大,加载时间较长,仍然无法截取到已加载的第一帧。补充:通过 URL.createObjectURL()方法能够基本做到无察觉,但并不保险。
loadeddata 当前帧数(第一帧)加载完毕触发,没毛病。结论:可用。补充:万一第一帧是黑屏想用下一帧怎么办,对不起,余下帧数加没加载完不在它的考虑范围之类,这个事件不管。
canplay 视频能够开始播放时触发,也就是根据上传的视频帧数决定加载多少帧(24/25/30/60等等)后满足播放画面后触发。总结:因为加载相对于 loadeddata的事件来说更多(多一丢丢),总体可行。补充:通过控制 currentTime可以满足(但不可能是第二帧那么准确),可以看做“当前播放帧”。
play 开始播放时才会触发,和上传快速截取的需求不是很符合。
waiting 已播放但下一画面没缓冲好时触发,适合插播小广告。
2. 了解上面的响应事件之后,让我们来看一下接下来截取操作:
上面的的结果是什么呢?
可以看到已经很成功的截取到了视频的第一帧,那么到此阶段,其实已经基本实现了需求,但是图片是否是有效的,这个还未可知,所以需要我们进一步去判断。
3. 第一帧是否有效
其实,截取到的第一帧图片,有些时候由于视频的质量不佳或者一些其他因素影响,截取到的图片往往不是很符合预期,一直与会出现纯黑的图片,透明图片,白色图片等等无效图片。因此,我们需要进行一下图片有效性的识别。 那么,怎么去识别图片的有效性呢?
相关阅读 >>
编写一个javascript程序来列出javascript对象的属性
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者