雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

Hi, 请登录我要注册找回密码

使用ffmpeg.wasm在前端html网页上压缩视频解决方案

2021-03-12 分类：前端之旅 / 后端之路阅读(8411) 评论(0)

大名鼎鼎的 ffmpeg 一直在用, 用来压缩转码视频特别方便, 今天偶然间发现, 居然可以在网页上压缩视频, 于是简单的尝试了一下: 做出记录:

github仓库地址: https://github.com/ffmpegwasm/ffmpeg.wasm

首先, 我用手机拍了一段视频, 一共有30M

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
	<style>
      html, body {
          margin: 0;
          width: 100%;
          height: 100%
      }
      body {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
	</style>
</head>
<body>
	<h3>视频前端压缩方案</h3>
	<video id="output-video" controls></video><br/>
	<input type="file" id="uploader">
	<p id="message"></p>
	<script>
		const { createFFmpeg, fetchFile } = FFmpeg;
		const message = document.getElementById('message');
		const ffmpeg = createFFmpeg({
			log: true,
			progress: ({ ratio }) => {
				message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`;
			},
		});
		const transcode = async ({ target: { files }  }) => {
			const { name } = files[0];
			message.innerHTML = 'Loading ffmpeg-core.js';
			await ffmpeg.load();
			message.innerHTML = 'Start transcoding';
			ffmpeg.FS('writeFile', name, await fetchFile(files[0]));
			await ffmpeg.run('-i', name,  'output.mp4');
			message.innerHTML = 'Complete transcoding';
			const data = ffmpeg.FS('readFile', 'output.mp4');
			const video = document.getElementById('output-video');
			video.src = URL.createObjectURL(new Blob([data.buffer], {
				type: 'video/mp4'
			}));
		}
		document.getElementById('uploader').addEventListener('change', transcode);
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Title</title>

<style>

html, body {

margin: 0;

width: 100%;

height: 100%

}

body {

display: flex;

flex-direction: column;

align-items: center;

}

</style>

</head>

<body>

<h3>视频前端压缩方案</h3>

const { createFFmpeg, fetchFile } = FFmpeg;

const message = document.getElementById('message');

const ffmpeg = createFFmpeg({

log: true,

progress: ({ ratio }) => {

message.innerHTML = `Complete: ${(ratio * 100.0).toFixed(2)}%`;

});

const transcode = async ({ target: { files } }) => {

const { name } = files[0];

message.innerHTML = 'Loading ffmpeg-core.js';

await ffmpeg.load();

message.innerHTML = 'Start transcoding';

ffmpeg.FS('writeFile', name, await fetchFile(files[0]));

await ffmpeg.run('-i', name, 'output.mp4');

message.innerHTML = 'Complete transcoding';

const data = ffmpeg.FS('readFile', 'output.mp4');

const video = document.getElementById('output-video');

video.src = URL.createObjectURL(new Blob([data.buffer], {

type: 'video/mp4'

}));

}

document.getElementById('uploader').addEventListener('change', transcode);

</script>

</body>

</html>

压缩之后, 一共是 2.3 M, 就是速度有点慢, 效果还可以, 中途会下载一个 25M 左右的js文件, 因此, 不建议在移动端使用!

上面代码粘贴到html可以直接使用

分享到：更多 ()

碎碎念):(来自公众号)

左邻右舍

Brian's Blog
易水寒
楼教主
贤心
阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

一	二	三	四	五	六	日
« 十
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

相关推荐

雅荷心语博客 -心之所向便是光