H5-ffmpeg.js压缩视频

11 篇文章 0 订阅
4 篇文章 0 订阅

尝试ffmpeg进行上传前压缩视频
目前尝试浏览器H5版本可以压缩

<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<h2>视频前端压缩</h2>
<video id="video" controls></video><br/>
<input type="file" id="upload">
<p id="text"></p>
<script>
		const { createFFmpeg, fetchFile } = FFmpeg;
		const text = document.getElementById('text');
		const ffmpeg = createFFmpeg({
			log: true,
			progress: ({ ratio }) => {
				text.innerHTML = `完成率: ${(ratio * 100.0).toFixed(2)}%`;
			},
		});
		const transcode = async ({ target: { files }  }) => {
			const { name } = files[0];
			text.innerHTML = '正在加载 ffmpeg-core.js';
			await ffmpeg.load();
			text.innerHTML = '开始压缩';
            ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
			// '-b','2000000'  值越小  压缩率越大
			await ffmpeg.run('-i', name,'-b','2000000','put.mp4');
			text.innerHTML = '压缩完成';
			const data = ffmpeg.FS('readFile', 'put.mp4');
			const video = document.getElementById('video');
			video.src = URL.createObjectURL(new Blob([data.buffer], {
				type: 'video/mp4'
			}));
		}
		document.getElementById('upload').addEventListener('change', transcode);
	</script>

ffmepg地址:https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js

尝试了H5版小程序,在微信调试工具下和浏览器下压缩是没问题
企业微信浏览器和微信浏览器下无效,把我整懵了,着实有点坑

const { createFFmpeg, fetchFile } = require('../../components/ossUpload/ffmpeg.min.js');
uni.chooseVideo({
	sourceType: ['camera', 'album'],
	success: function (resdata) {
		const ffmpeg = createFFmpeg({
			log: true,
			progress: ({ ratio }) => {
				_this.loadText = `${(ratio * 100.0).toFixed(2)}%`
				console.log(`完成率: ${(ratio * 100.0).toFixed(2)}%`)
			}
		});
		const transcode = async (files) => {
			const { name } = files;
			_this.uploadLoad = true
			_this.loadText = "压缩中"
			console.log('正在加载 ffmpeg-core.js')
			await ffmpeg.load();
			console.log('开始压缩')
			ffmpeg.FS('writeFile', name, await fetchFile(files));
			// '-b','2000000'  值越小  压缩率越大
			await ffmpeg.run('-i', name,'-b','200000','put.mp4');
			console.log('压缩完成')
			const data = ffmpeg.FS('readFile', 'put.mp4');
			let file = new File([data.buffer], name, { type: "video/mp4" });
			let date = new Date();
			let currentTime = date.getFullYear() + '-' + (date.getMonth() - 0 + 1) + '-' + date.getDate();
			let nameArr = name.split('.');
			let key = currentTime + '/' + Math.floor((Math.random() * 1000000)) + '/' + Math.floor((Math.random() *
				1000000)) + '.' + nameArr[nameArr.length - 1];
			let length = _this.fileList.length - 1;
			let formData = {
				key:key,
				token:_this.formData['token']
			}
			await _this.uploadFile(file, formData, length)
		}
		transcode(resdata.tempFile)
	}
});

注:‘-b’,‘2000000’,通过修改比特率来达到压缩视频的效果,2000000,这个压缩效果很不错,亲测
还可以用 -crf 方式压缩,设置 -qscale质量参数压缩视频,不过这种方式只支持x264
ffmepg命令参数说明:https://www.cnblogs.com/chen1987lei/archive/2010/12/03/1895242.html

视频倒放:await ffmpeg.run(‘-i’, name,‘-vf’, “reverse”,‘put.mp4’); 视频剪切:
await ffmpeg.run(‘-ss’,‘00:00:00’,‘-t’,‘00:00:05’,‘-i’,
name,‘-vcodec’, “copy”,“-acodec”,“copy”,‘put.mp4’);

去除视频背景音乐:
只需将上面命令加上 ‘-an’ 去除音频

如:await ffmpeg.run(‘-i’, name,‘-an’,‘-b’,‘2000000’,‘put.mp4’); 即可

网页H5效果还是可以的!

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 9
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值