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

时间:2024-02-17 22:40:44

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

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

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

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

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