做图文的网站,交换神器,工信部企业网站备案,这两天发生的重大新闻使用input上传视频#xff0c;获得视频的第一帧 参考#xff1a;JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html#xff1a;
inputbind:this{uploadRef}on:change{handleUpload}acceptvideo/*typefile/视频类型校验获得视频的第一帧 参考JavaScript获取视频的尺寸信息和第一帧图片 - 掘金 (juejin.cn) html
inputbind:this{uploadRef}on:change{handleUpload}acceptvideo/*typefile/视频类型校验
const VIDEO_REG /^(?:video\/avi|video\/mpeg|video\/mp4|video\/ogg|video\/webm|video\/x-ms-wmv|video\/x-msvideo)$/i;handleUpload
校验类型获得视频第一帧图片调用getVideoImg方法
const handleUpload(e){const files e.target.files[0];if(VIDEO_REG.test(files.type)){const videoImg await getVideoImg(files);}
}相关方法getVideoImg。
使用canvas实现从一个视频文件中提取一帧图像并将这个图像转换为一个可以在浏览器中使用的URL。
const getVideoImg async (files: File): Promisestring {try {// 使用loadVideo函数加载视频文件等待加载完成const video: HTMLVideoElement await loadVideo(files);const canvasElem document.createElement(canvas);// 设置canvas的宽度和高度与视频的宽度和高度相同canvasElem.width video.videoWidth;canvasElem.height video.videoHeight;// 获取canvas的2d渲染上下文并在canvas上绘制视频的当前帧canvasElem.getContext(2d)?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);const pngFile await new Promisestring((resolve, reject) {// 将canvas的内容导出成一个blob文件canvasElem.toBlob((blob) {if (blob) {// 成功创建了blob文件将其转换为File对象然后创建一个指向这个File对象的URLresolve(URL.createObjectURL(toThumbFile(blob)));} else {// 创建blob文件失败拒绝Promisereject();}}, image/png);});// 返回Promise的结果即指向File对象的URLreturn pngFile;} catch (error) {// 如果在上述过程中发生错误打印错误信息console.error(error);}
};其中调用了loadVideo
const loadVideo (file: File): PromiseHTMLVideoElement {return new Promise(function (resolve, reject) {const videoElem document.createElement(video);const dataUrl URL.createObjectURL(file);videoElem.onloadeddata function () {// 当video元素的当前帧的数据可用时将video元素作为Promise的结果resolve(videoElem);};// 当video元素发生错误时的处理函数videoElem.onerror function () {reject(video error);};// 设置video元素的preload属性为auto这样video元素会预加载数据// 如果不设置这个属性可能会导致截图为黑色图片的情况videoElem.setAttribute(preload, auto);// 设置video元素的src属性为指向File对象的URLvideoElem.src dataUrl;});
};// 输入的Blob对象文件名是video_img.png
const toThumbFile (blob) new File([blob], video_img.png);
调用
videoImg await getVideoImg(files);得到的videoImg 可以在img src{videoImg }/ 中显示。
不用videoImg 后要使用URL.revokeObjectURL释放URL.createObjectURL生成的链接以blob:开头。一般来说在 销毁 的生命周期调用。
if (/^blob:/.test(videoImg)) {URL.revokeObjectURL(videoImg);}
