h5视频上传之前端视频压缩研究

今天领导接到一个h5上传手机视频的需求，主要是要看用户在这个视频中有没有完成某个任务，比如投篮进了几个球。
但是由于手机拍摄的视频文件大小有点大，直接上传的话，用户流量顶不住，而且特别耗时，在这样的情况下领导提出视频压缩的要求。

作为前端，我的想法是不行的，首先传统的做法是服务器压缩（想要了解服务器压缩的请谷歌或者百度FFmpeg命令），参考服务器压缩，服务器压缩是多种的，可以压缩视频的帧数、压缩视频的画质（图像的画质）、改变文件编码。
从这几个方面出发，

减少帧数，用canvas定时绘制视频，这样就可以控制帧数，但是这里就有两个问题，一：视频必须在客户端从头到尾播放完成，这样canvas才能绘制到视频的画面，而且播放视频的时候视频在ios中会默认全屏播放，导致用户体验不好，网页行内播放；二：可能会卡（这个来不及测试），这个是因为保存一张图片需要的操作是把当前视频的图像渲染到canvas上，然后canvas导出base64图像，这个操作还是比较消耗资源的，所以我认为假如设定20帧或者10帧就会让页面变得很卡。

压缩画质和改变编码，可以调用canvas的canvas.toDataURL(type, encoderOptions)函数，第一个参数是文件类型，第二个参数是图像质量。

从这个3个方面做有个致命的缺点就是没有音轨，因为都把视频分成多张图片保存了，还有一个影响因素，视频的编码不仅仅是一张张的图片，里面也存在减小占用空间的算法，因此不一定最后压缩出来的全部内存占用会比原始视频文件小。