【音视频处理】纯js实现上传视频，截取关键帧作为封面，上传后端保存

前言

本篇文章是上一篇文章的一个应用。实现视频上传，截取关键帧，并上传给后端保存。这个场景比较多见，今天就说说实现方式吧。原理很简单，就是通过canvas获取某一帧的base64格式，然后转换为file格式，再通过ajax上传给服务端，保存缩略图。

案例

直接上案例吧：

html

<input type="file"/>

首先创建一个video,然后再选取视频文件之后，自动添加到body中

let video =document.createElement("video")
video.setAttribute('controls','controls')
document.querySelector('input[type="file"]').addEventListener('change',function () {
    document.body.appendChild(video)
    video.src = window.URL.createObjectURL(this.files[0])
})

然后创建canvas，在视频播放的时候，截取第几秒。

  var imgHeight = 0,
        imgWidth = 0,
        videoWidth = 0,
        videoHeight = 0,
        //要截图的视频
        // video = document.getElementById('video');

        canvas = document.createElement("canvas");
        canvasCtx = canvas.getContext("2d");

        //视频准备好可以播放
        video.addEventListener("canplay", function () {
            //获取展示的video宽高作为画布的宽高和临时视频截图的宽高
            canvas.width = imgWidth = video.offsetWidth;
            canvas.height = imgHeight = video.offsetHeight;
            //获取实际视频的宽高，相当于视频分辨率吧
            videoWidth = video.videoWidth;
            videoHeight = video.videoHeight;
            setTimeout(() => {
                video.pause();
                  //坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。
                  canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);
                  //把图标base64编码后变成一段url字符串
                  var dataUrl = canvas.toDataURL("image/png");
                  // 获取图片的base64格式
                  // 通过上一篇文章的：https://www.haorooms.com/post/js_file_base64_blob 把base64转换为file
                 base64ConvertFile(dataUrl,'haorooms截取视频帧')
                   // 然后通过上一节的ajax进行上传


            }, 1000);// 1000毫秒，就是截取第一秒，2000毫秒就是截取第2秒，视频1秒通常24帧，也可以换算成截取第几帧。
            //防止拖动进度条的时候重复触发
            video.removeEventListener("canplay", arguments.callee);
        });

案例预览地址

案例预览可以看下资源库里面的demo：http://resource.haorooms.com/showdemo.html?id=285

上传本地mp4视频，就可以截取第一秒的图片。

小结

这个案例可以简单实现上传视频，截取关键帧作为封面，上传后端保存。获取封面url的效果。

假如要获取视频某一秒，或者某一帧，请戳：https://www.haorooms.com/post/js_getvideo_frame