vue 录制视频并压缩视频文件的方法

发布时间：2020-12-17 02:15:56 所属栏目：百科来源：网络整理

导读：文件上传框我这里使用的是Vue写的，以下是我的流程及代码：一、下载gif.js相关文件，可以到这里下载，然后将这几个文件放在根目录的static/js里面。二、下载依赖包：三、在页面中声明：四、html代码块：视频大小：{{videoSize}} 视频时长：{{videoLeng

文件上传框

我这里使用的是Vue写的，以下是我的流程及代码：

一、下载gif.js相关文件，可以到这里下载，然后将这几个文件放在根目录的static/js里面。

二、下载依赖包：

三、在页面中声明：

四、html代码块：

视频大小：{{videoSize}}

视频时长：{{videoLength}}

五、在页面加载完成时初始化GIF：

六、当input录制完视频返回页面中，获取到这个视频文件，每次拿到视频文件需要先移除之前的监听：

七、上一步提到的this.androidFile方法，是通过这个视频文件，在页面播放一遍，在这个播放过程处理视频，完成整个转换过程，获取到最终的文件：

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',false);
//视频播放完
video.addEventListener('ended',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堆叠：

九、步骤七所说的this.videoEnded方法。视频播放完，通过gif.js将图片堆叠的动态图渲染出来：

十、步骤七所说的that.convertBase64UrlToFile方法。将gif.js生成的Blob文件转换成File格式：

最后通过步骤七所说的that.uploadVideo方法，上传图片给服务器：

在这提供我的全部代码，Android的视频文件比较大所以做压缩，而IOS本身存在视频压缩，所以我这里做了区分

视频大小：{{videoSize}}

视频时长：{{videoLength}}

试过很多种方法，而这种在移动端浏览器（特别是微信浏览器！）的兼容性是最好的。但是这个生成的视频文件将会失去音频，如果需要音频的可以看我另一篇简书有说明几种方法。有更好的方法欢迎大家留言，互相学习~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!