草庐IT

H5-ffmpeg.js压缩视频

LLLLLLLLLLLLL刘 2023-07-20 原文

尝试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效果还是可以的!

有关H5-ffmpeg.js压缩视频的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  3. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像,并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时,是将这组图像视为MJPG流。我需要转换一组PNG图像到视频,FFMPEG就不认了。pyav内置了ffmpeg库,不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  4. TimeSformer:抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”,各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解,本篇主要介绍了FBAI团队的TimeSformer,这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用,就请点赞、收藏、关注!paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  5. ruby - 无法在 Ruby 中将 ffmpeg 作为子进程运行 - 2

    我正在尝试使用以下代码通过将ffmpeg实用程序作为子进程运行并获取其输出并解析它来确定视频分辨率:IO.popen'ffmpeg-i'+path_to_filedo|ffmpegIO|#myparsegoeshereend...但是ffmpeg输出仍然连接到标准输出并且ffmepgIO.readlines是空的。ffmpeg实用程序是否需要一些特殊处理?或者还有其他方法可以获得ffmpeg输出吗?我在WinXP和FedoraLinux下测试了这段代码-结果是一样的。 最佳答案 要跟进mouviciel的评论,您需要使用类似pope

  6. ruby - Ruby 的压缩库? - 2

    是否有任何可用于Ruby的开源压缩/解压库?有没有人实现过LZW?或者,是否有任何使用压缩组件的开源库可以提取出来独立使用?编辑——感谢您的回答!我应该提到我必须压缩的是只驻留在数据库中的长字符串(我不会压缩文件)。此外,如果可以执行此操作的任何库都具有用于客户端压缩/分解的等效JavaScript实现,那将是理想的,因为这将用于Web应用程序。 最佳答案 您会在rubystdlib下找到所有已交付的ruby​​库的一个很好的列表.我会使用zlib库,它是开放的,无处不在,您会发现几乎所有语言的库!

  7. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  8. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  9. ruby - 如何更改此正则表达式以从未指定 v 参数的 Youtube URL 获取 Youtube 视频 ID? - 2

    目前我正在使用这个正则表达式从YoutubeURL中提取视频ID:url.match(/v=([^&]*)/)[1]我怎样才能改变它,以便它也可以从这个没有v参数的YoutubeURL获取视频ID:http://www.youtube.com/user/SHAYTARDS#p/u/9/Xc81AajGUMU感谢阅读。编辑:我正在使用ruby​​1.8.7 最佳答案 对于Ruby1.8.7,这就可以了。url_1='http://www.youtube.com/watch?v=8WVTOUh53QY&feature=feedf'url

  10. ruby - 读取 zip 存档中的文件,无需解压缩存档 - 2

    我有一个包含100多个zip文件的目录,我需要读取zip文件中的文件以进行一些数据处理,而无需解压缩存档。是否有一个Ruby库可以在不解压缩文件的情况下读取zip存档中的文件内容?使用rubyzip报错:require'zip'Zip::File.open('my_zip.zip')do|zip_file|#Handleentriesonebyonezip_file.eachdo|entry|#Extracttofile/directory/symlinkputs"Extracting#{entry.name}"entry.extract('here')#Readintomemoryc

随机推荐