炫意html5
最早CSS3和HTML5移动技术网站之一

【音视频处理】纯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.xyhtml5.com/post/js_file_base64_blob 把base64转换为file
base64ConvertFile(dataUrl,'炫H5截取视频帧')
// 然后通过上一节的ajax进行上传
}, 1000);// 1000毫秒,就是截取第一秒,2000毫秒就是截取第2秒,视频1秒通常24帧,也可以换算成截取第几帧。
//防止拖动进度条的时候重复触发
video.removeEventListener("canplay", arguments.callee);
});

案例预览地址

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

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

小结

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

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

Java基础教程Android基础教程