临沂学做网站,网站系统分析的步骤有哪些,微信app,凡科建站网页版前言
虽然最后没有采用这种方案来实现滚动控制视频进度#xff0c;但是仍然想自己试试这种方案的实现#xff0c;毕竟应用范围也挺广的。 核心代码并不多#xff0c;算是一篇小短文#xff5e;。
掘金好像不允许放站外演示链接#xff0c;所以这里就用动图大概展示下最终…前言
虽然最后没有采用这种方案来实现滚动控制视频进度但是仍然想自己试试这种方案的实现毕竟应用范围也挺广的。 核心代码并不多算是一篇小短文。
掘金好像不允许放站外演示链接所以这里就用动图大概展示下最终的效果吧。 头像转动特效其实是一个视频视频本身是60帧的录屏GIF上传帧率比较低所以看起来卡卡的实际不是。
实现原理
获取视频video节点根据配置循环控制视频的currentTime来控制进度然后新建一个canvas来将每一刻的图像存储起来实现起来还是有不少细节具体往后看。
代码实现-创建节点
做下准备工作新建一个视频节点preload“auto” loop autoPlay mute这三个属性使视频可以循环自动播放另外这里用了webm格式的视频是不是想到了webp没错类似的比较节约空间但是实测在高速拖动情况下不如mp4格式流畅兼容性也差点不过当前场景没关系这里就不展开细说。
const videoFile require(../../assets/imgs/head_video.webm)
video ref{videoRef} className{video} preloadauto loop autoPlay muted{true} src{videoFile}/ 代码实现-函数基本结构
改变视频进度来获取每一帧这个操作毫无疑问是异步的所以理想状态下是这样的创建一个取帧的函数bufferVideoFrames(videoFile, frameRate)接收一个视频对象以及帧率参数返回一个promise。
// 调用获取结果返回一个base64数组
const res bufferVideoFrames(videoFile, 30)// 缓存函数xxxxxx
const bufferVideoFrames async (videoFile, frameTotal 24) {return new Promise(async (resolve) {.......................................}
} 完善缓存函数-配置监听
首先我们对视频的截图操作一定是要等视频当前帧加载完才能去进行的所以需要监听视频当前帧加载完成 此时缓存函数扩充一下监听“loadeddata”事件 // 缓存函数xxxxxx
const bufferVideoFrames async (videoFile, frameTotal 24) {return new Promise(async (resolve) {// 当浏览器已加载视频的当前帧时触发videoNode.addEventListener(loadeddata, async function () {// 在这里执行具体代码}
} 但是我们并不是一定要页面加载完就触发我们可能是点击某个按钮才触发缓存所以我们能不在页面初始化的时候就去注册这个监听而是在这个函数调用的时候才注册为了调用函数的时候能触发这个监听我们手动将参数里的视频对象再次挂载到视频节点上即可。
// 获取视频标签节点
let videoNode document.createElement(video);
// 挂载一次视频对象这一步会触发加载完成事件监听
videoNode.src videoFile; 也就是说此时缓存函数结构应该是 1.获取节点 2.注册监听 3.挂载视频触发监听 完善代码此时的缓存函数 // 缓存函数xxxxxx
const bufferVideoFrames async (videoFile, frameTotal 24) {return new Promise(async (resolve) {// 获取视频标签节点let videoNode document.createElement(video);// 当浏览器已加载视频的当前帧时触发videoNode.addEventListener(loadeddata, async function () {// 在这里执行具体代码}// 挂载一次视频对象这一步会触发加载完成事件监听videoNode.src videoFile;
} 完善缓存函数-使用canvas保存帧
到了这一步基本结构完成距离完成已经是临门一脚在监听内容里新建canvas循环改变视频进度保存当前帧到结果数组就好代码如下这里补充了一些配置类的变量 videoNode.addEventListener(loadeddata, async function () {// 新建一个canvas画布承载当前帧视频let canvas document.createElement(canvas);let context canvas.getContext(2d);// 尺寸根据视频宽高设置let [w, h] [videoNode.videoWidth, videoNode.videoHeight]canvas.width w;canvas.height h;let frames [];// 存放取出的帧let interval 1 / frameTotal;// 计算每帧时长例如60帧就是1/60每帧16.6mslet currentTime 0;// 起始时间let duration videoNode.duration;// 视频总时长while (currentTime duration) {// 不断按每帧时长移动播放位置直到视频结束videoNode.currentTime currentTime;// 保存帧到canvas的contextcontext.drawImage(videoNode, 0, 0, w, h);// 将canvas转为base64的图片格式let base64ImageData canvas.toDataURL();// 存入结果数组frames.push(base64ImageData);// 移动视频进度currentTime interval;}resolve(frames);}); 完善缓存函数-处理currentTime的异步问题
不出意外的话还是出意外的了按上述的方法来实现最终获取到的图像竟然是空白的果然没有那么顺利。 // 不断按每帧时长移动播放位置直到视频结束videoNode.currentTime currentTime;// 保存帧到canvas的contextcontext.drawImage(videoNode, 0, 0, w, h); 在这里设置currentTime之后视频的帧实际上还没渲染完成设置currentTime是一个异步的操作这样写根本生成不了context的内容因为还没等帧渲染完这个循环就已经执行完成了。
所以我们要等设置进度的操作执行完再去保存canvas的内容查了一下还好有设置进度完成的监听事件——“seeked”await的好处来了很简单中间加一步我们等到“seeked”监听触发再去保存即可。
// 关键通过await等待视频移动完成后才执行后续帧的保存通过seeked事件监听
// eslint-disable-next-line no-loop-funcawait new Promise(r seeked r);
// 保存帧到canvas的contextcontext.drawImage(videoNode, 0, 0, w, h); 提前把“seeked”监听在调用函数的时候注册一下最终的版本就完成了
const bufferVideoFrames async (videoFile, frameTotal 24) {return new Promise(async (resolve) {// 获取视频标签节点let videoNode document.createElement(video);let seeked;// 监听设置视频播放位置动作结束videoNode.addEventListener(seeked, async function () {if (seeked) seeked();});// 当浏览器已加载视频的当前帧时触发videoNode.addEventListener(loadeddata, async function () {// 新建一个canvas画布承载当前帧视频let canvas document.createElement(canvas);let context canvas.getContext(2d);// 尺寸根据视频宽高设置let [w, h] [videoNode.videoWidth, videoNode.videoHeight]canvas.width w;canvas.height h;let frames [];// 存放取出的帧let interval 1 / frameTotal;// 计算每帧时长例如60帧就是1/60每帧16.6mslet currentTime 0;// 起始时间let duration videoNode.duration;// 视频总时长while (currentTime duration) {// 不断按每帧时长移动播放位置直到视频结束videoNode.currentTime currentTime;// 关键通过await等待视频移动完成后才执行后续帧的保存通过seeked事件监听// eslint-disable-next-line no-loop-funcawait new Promise(r seeked r);// 保存帧到canvas的contextcontext.drawImage(videoNode, 0, 0, w, h);// 将canvas转为base64的图片格式let base64ImageData canvas.toDataURL();// 存入结果数组frames.push(base64ImageData);// 移动视频进度currentTime interval;}resolve(frames);});// 一步会触发加载完成事件监听videoNode.src videoFile;});
} 结语
帧率越高每一帧之间更接近过渡更平滑但是如果原视频只有30帧那么按60帧取帧就会有一半的帧是重复的并无意义。
前端场景下的应用可用于抽帧合成、视频截图、动画进度控制Apple官网用途还是很广的。
缺点就是占用内存在处理一些高清比如一个1280*720的1分钟的视频按照40帧来进行缓存内存占用将达到G级别。
最后
为大家准备了一个前端资料包。包含54本2.57G的前端相关电子书《前端面试宝典附答案和解析》难点、重点知识视频教程全套。 有需要的小伙伴可以点击下方卡片领取无偿分享
