这篇“vue如何实现录制视频并压缩视频文件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue如何实现录制视频并压缩视频文件”文章吧。
一、下载gif.js相关文件，可以到这里下载，然后将这几个文件放在根目录的static/js里面。
gif.js相关文件及存放路径
二、下载依赖包：
npm i timers三、在页面中声明：
import { setInterval, clearInterval } from "timers";import GIF from "../../static/js/gif.js"四、html代码块：
<template> <div> <input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" /> <div> <div>视频大小：{{videoSize}}</div> <div>视频时长：{{videoLength}}</div> <div> <video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video> <canvas id="canvas" :width="winWidth" :height="winHeight"></canvas> </div> </div> </div></template>五、在页面加载完成时初始化GIF：
mounted(){ //初始gif this.gif = new GIF({ workers: 1, quality: 1000, width: window.innerWidth, height: window.innerHeight, workerScript: '../../static/js/gif.worker.js', }); },六、当input录制完视频返回页面中，获取到这个视频文件，每次拿到视频文件需要先移除之前的监听：
//input文件走向 changeVideo(e){ var file = e.target.files[0]; const video = document.getElementById('myvideo'); //视频开始播放 video.removeEventListener('play', this.videoPlay, false); //视频播放完 video.removeEventListener('ended', this.videoEnded, false); this.androidFile(file); },七、上一步提到的this.androidFile方法，是通过这个视频文件，在页面播放一遍，在这个播放过程处理视频，完成整个转换过程，获取到最终的文件：
//安卓拍摄视频 androidFile(file){ //视频字节大小 this.videoSize = file.size; const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); this.gifSetTime = true; this.gif.abort() this.gif.frames = []; //file转base64 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { that.videoSrc = this.result; video.play(); } //视频开始播放 video.addEventListener('play', this.videoPlay, false); //视频播放完 video.addEventListener('ended', this.videoEnded, false); //获取到所有的图片并渲染完后执行 this.gif.on('finished', function(blob) { if(that.fileAndroid.size == blob.size) return; console.log("gif的blob文件",blob); //file that.fileAndroid = that.convertBase64UrlToFile(blob); //上传视频文件 that.uploadVideo(that.fileAndroid); }); },八、步骤七所说的this.videoPlay方法。视频在页面播放过程中，每200毫秒通过canvas截取一张图片，把这些图片一张张给gif.js堆叠：
//视频开始播放 videoPlay(){ const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); console.log("视频时长",video.duration); this.videoLength = video.duration; //画布上画视频，需要动态地获取它，一帧一帧地画出来 var times = setInterval(function(){ context.drawImage(video, 0, 0, that.winWidth, that.winHeight); that.gif.addFrame(context, { copy: true }); if(that.gifSetTime == false){ clearInterval(times); } }, 200); },九、步骤七所说的this.videoEnded方法。视频播放完，通过gif.js将图片堆叠的动态图渲染出来：
//视频播放完 videoEnded(){ this.gifSetTime = false; console.log("视频播放完毕！") this.gif.render(); },十、步骤七所说的that.convertBase64UrlToFile方法。将gif.js生成的Blob文件转换成File格式：
//blob to file convertBase64UrlToFile(blob) { var d = new Date().getTime(); var type = 'image/gif' return new File([blob],"fileGif-" + d + '.gif', {type:type}); },最后通过步骤七所说的that.uploadVideo方法，上传图片给服务器：
//上传视频 uploadVideo(file){ console.log("上传的视频文件", file) },在这提供我的全部代码，Android的视频文件比较大所以做压缩，而IOS本身存在视频压缩，所以我这里做了区分
<template> <div> <input ref="changeInput" type="file" accept="video/*" capture="user" @change="changeVideo" /> <div> <div>视频大小：{{videoSize}}</div> <div>视频时长：{{videoLength}}</div> <div> <video id="myvideo" :src="videoSrc" :width="winWidth" :height="winHeight" ref="videoId" autoplay="true" controls muted></video> <canvas id="canvas" :width="winWidth" :height="winHeight"></canvas> </div> </div> </div></template><script>import { setInterval, clearInterval } from "timers";import GIF from "../../static/js/gif.js"export default { data(){ return { videoSize: '', videoSrc: '', videoLength: '', isAndroid: false, fileAndroid: {}, winWidth: window.innerWidth, winHeight: window.innerHeight, gifSetTime: false, gif: '', } }, created() { //判断终端 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid){ console.log('isAndroid') this.isAndroid = true; }else if(isiOS){ console.log('isiOS') this.isAndroid = false; } }, mounted(){ //初始gif this.gif = new GIF({ workers: 1, quality: 1000, width: this.winWidth, height:this.winHeight, workerScript: '../../static/js/gif.worker.js', }); }, methods:{ //input文件走向 changeVideo(e){ var file = e.target.files[0]; const video = document.getElementById('myvideo'); if(file !== undefined){ //判断走向 if(this.isAndroid){ //视频开始播放 video.removeEventListener('play', this.videoPlay, false); //视频播放完 video.removeEventListener('ended', this.videoEnded, false); this.androidFile(file); }else{ this.iphoneFile(file); } } }, //IOS拍摄视频 iphoneFile(file){ const that = this; //视频字节大小 this.videoSize = file.size; var url = null ; //file转换成blob if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } this.videoSrc = url; if(file.size < 2100000 && file.size > 500000){ this.uploadVideo(file); }else if(file.size >= 2100000){ this.$vux.toast.text('视频太大，请限制在10秒内'); }else{ this.$vux.toast.text('视频录制不能少于5秒'); } }, //安卓拍摄视频 androidFile(file){ //视频字节大小 this.videoSize = file.size; const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); this.gifSetTime = true; this.gif.abort() this.gif.frames = []; //file转base64 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { that.videoSrc = this.result; video.play(); } //视频开始播放 video.addEventListener('play', this.videoPlay, false); //视频播放完 video.addEventListener('ended', this.videoEnded, false); this.gif.on('finished', function(blob) { if(that.fileAndroid.size == blob.size) return; console.log("gif的blob文件",blob); that.fileAndroid = that.convertBase64UrlToFile(blob); that.uploadVideo(that.fileAndroid); }); }, //视频开始播放 videoPlay(){ const that = this; const video = document.getElementById('myvideo'); const canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); console.log("视频时长",video.duration); this.videoLength = video.duration; //画布上画视频，需要动态地获取它，一帧一帧地画出来 var times = setInterval(function(){ context.drawImage(video, 0, 0, that.winWidth, that.winHeight); that.gif.addFrame(context, { copy: true }); if(that.gifSetTime == false){ clearInterval(times); } }, 200); }, //视频播放完 videoEnded(){ this.gifSetTime = false; console.log("视频播放完毕！") this.gif.render(); }, //blob to file convertBase64UrlToFile(blob) { var d = new Date().getTime(); var type = 'image/gif' return new File([blob],"fileGif-" + d + '.gif', {type:type}); }, //上传视频 uploadVideo(file){ console.log("上传的视频文件", file) }, }};</script><style scoped></style>以上就是关于“vue如何实现录制视频并压缩视频文件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
