开启AdminJS成长之旅!这是我参与「AdminJS · 12 月更文挑战」的第1天,点击查看活动详情
前言
此文算是对另一篇文章中,对视频进度高频控制的备选实现方案,感兴趣可以看看此文《苹果官网动效探索-滚动驱动视频及分区动画执行》。
虽然最后没有采用这种方案来实现滚动控制视频进度,但是仍然想自己试试这种方案的实现,毕竟应用范围也挺广的。 核心代码并不多,算是一篇小短文~。
AdminJS好像不允许放站外演示链接,所以这里就用动图大概展示下最终的效果吧。
头像转动特效其实是一个视频,视频本身是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"} preload="auto" 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;
也就是说此时缓存函数结构应该是:
- 获取节点
- 注册监听
- 挂载视频,触发监听
完善代码,此时的缓存函数:
// 缓存函数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.6ms
let currentTime = 0;// 起始时间
let duration = videoNode.duration;// 视频总时长
while (currentTime < duration) {
// 不断按每帧时长,移动播放位置,直到视频结束
videoNode.currentTime = currentTime;
// 保存帧到canvas的context
context.drawImage(videoNode, 0, 0, w, h);
// 将canvas转为base64的图片格式
let base64ImageData = canvas.toDataURL();
// 存入结果数组
frames.push(base64ImageData);
// 移动视频进度
currentTime += interval;
}
resolve(frames);
});
完善缓存函数-处理currentTime的异步问题
不出意外的话还是出意外的了,按上述的方法来实现,最终获取到的图像竟然是空白的!果然没有那么顺利。
赶紧查了一下,才发现还是大意了,问题就是出在这里
// 不断按每帧时长,移动播放位置,直到视频结束
videoNode.currentTime = currentTime;
// 保存帧到canvas的context
context.drawImage(videoNode, 0, 0, w, h);
在这里设置currentTime之后,视频的帧实际上还没渲染完成,设置currentTime是一个异步的操作,这样写根本生成不了context的内容,因为还没等帧渲染完,这个循环就已经执行完成了。
所以我们要等设置进度的操作执行完,再去保存canvas的内容,查了一下,还好有设置进度完成的监听事件——“seeked”,await的好处来了,很简单,中间加一步,我们等到“seeked”监听触发,再去保存即可。
// 关键,通过await等待视频移动完成后,才执行后续帧的保存,通过seeked事件监听
// eslint-disable-next-line no-loop-func
await new Promise(r => seeked = r);
// 保存帧到canvas的context
context.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.6ms
let currentTime = 0;// 起始时间
let duration = videoNode.duration;// 视频总时长
while (currentTime < duration) {
// 不断按每帧时长,移动播放位置,直到视频结束
videoNode.currentTime = currentTime;
// 关键,通过await等待视频移动完成后,才执行后续帧的保存,通过seeked事件监听
// eslint-disable-next-line no-loop-func
await new Promise(r => seeked = r);
// 保存帧到canvas的context
context.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级别。