前端如何在上传之前对视频文件进行压缩？

Question

最近做了一个vue项目-的视频上传的功能，
需求是这样的：用户打开页面 ，会有一个打开摄像头的按钮，当用户点击按钮时，会打开手机摄像头对用户进行摄像。
问题：摄像完之后，iOS上传没有问题，安卓的一直在转圈，无法传成功。
之后检查 发现安卓前置摄像头录制10秒 文件就有20多M。而iOS只有几兆

想知道前端能不能压缩音频文件 有什么处理方法 对视频文件上传之前进行压缩？
网上搜索了很多方法 都没有用

视频上传方法：

<a href="javascript:;" class="a-upload">
  <input type="file" class="videoBtn" id="video"  @change="onUpload" accept="video/*" capture="user">
  开始录制视频
  </a>

 onUpload(event){
    var _this = this;
    let orderid = this.$route.query.orderid;
    console.log(event)
    var reader = new FileReader();
    var video = event.target.files[0];
    reader.readAsDataURL(video);
    reader.onloadend = function () {
        console.log(reader.result);
        _this.upLoadVideo(reader.result, orderid)
    }
},

Answer 1

这个问题已经解决了，一直忘了提交答案。
查询了很多资料，发现前端对视频进行压缩目前是做不到的。
想要在移动端把大内存视频传到服务端，目前我所知道的解决方式有两种：
1、前端对视频进行分块上传；
2、前端对视频进行转码后上传（不推荐）；

最终我所选的就是用的七牛云存储，前端把视频上传到七牛云上。
七牛云的做法就是把前端的视频分块上传到服务端保存

大于 4M 时可分块上传，小于 4M 时直传
分块上传时，支持断点续传

参考七牛云链接
七牛云JavaScript SDK

Answer 2

视频压缩应该是不可能了，要不换成分块上传？

Answer 3

上面说不可能的我就笑了，将视频等比例绘制到canvas上，再用canvas的captureStream api录制，就看你愿不愿意等了，视频多长就得等多久

Answer 4

跟楼主一样的问题 请问楼主解决了吗

Answer 5

前端压缩多半是不行的，只有服务器端程序才对视频处理，视频分片上传是一种解决思路

Answer 6

图片压缩你可以看https://zhuanlan.zhihu.com/p/... 视频压缩还是建议通过后端服务接口做，上传后通过ffmpeg就可以。

Answer 7

提一点，不要使用 readAsDataURL 用 readAsBinaryString. DataURL 是base64编码，编码后会暴涨 1/3 ！或者用 formData 直接 append 这个 file 。

Answer 8

有个js的库，jszip吧，可以进行压缩，但是结果不理想，原视频12兆，压缩完11兆。
后来我用7zip在电脑上压缩，也是12兆压缩到11兆，好像是一样大小的。
估计不改变视频质量只靠压缩是很难了

Answer 9

楼主我想问下 给视频添加水印前端这边应该是实现不了的吧