开启生长之旅！这是我参加「日新计划 12 月更文挑战」的第1天，点击查看活动概况

前语

此文算是对另一篇文章中，对视频进展高频操控的备选完结计划，感兴趣能够看看此文《苹果官网动效探究-非帧缓存计划完结翻滚驱动视频及动画履行》（还没写完，后面补链接）。

尽管最后没有选用这种计划来完结翻滚操控视频进展，可是仍然想自己试试这种计划的完结，究竟应用规模也挺广的。 核心代码并不多，算是一篇小短文～。

好像不允许放站外演示链接，所以这儿就用动图大约展现下终究的作用吧。

前端也能悄然对视频截图？js完结对视频按帧缓存

头像转动特效其实是一个视频，视频自身是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;

也便是说此刻缓存函数结构应该是：

  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.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的异步问题

不出意外的话仍是出意外的了，按上述的方法来完结，终究获取到的图画竟然是空白的！果然没有那么顺利。

前端也能悄然对视频截图？js完结对视频按帧缓存
赶紧查了一下，才发现仍是粗心了，问题便是出在这儿

   // 不断按每帧时长，移动播映方位，直到视频完毕
    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级别。