信发系统视频终端压缩—幽冥大陆(一百16)—东方仙盟
ffmpeg.wasm 是 FFmpeg 的 WebAssembly 版，处理音视频，无需后端、无需上传服务器。下面给你，直接复制保存为 index.html 打开就能用。
ffmpeg.wasm 浏览器调用（纯 HTML5/JS，复制可用）
ffmpeg.wasm 是 FFmpeg 的 WebAssembly 版，纯浏览器端处理音视频，无需后端、无需上传服务器。下面给你最简可运行 HTML，直接复制保存为 index.html 打开就能用。
一、最简调用示例（CDN 版，零安装）
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ffmpeg.wasm 浏览器调用</title>
</head>
<body>
<input type="file" id="fileInput" accept="video/*,audio/*">
<button onclick="transcode()">开始转码</button>
<div id="log"></div>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.12.15/dist/ffmpeg.min.js"></script>
<script src="https://unpkg.com/@ffmpeg/util@0.12.1/dist/util.min.js"></script>
<script>
const { FFmpeg } = FFmpegWASM;
const { fetchFile, toBlobURL } = FFmpegUtil;
const ffmpeg = new FFmpeg();
// 日志输出
ffmpeg.on("log", ({ message }) => {
log.innerHTML += message + "<br>";
});
// 加载 ffmpeg 核心（wasm）
async function loadFFmpeg() {
const coreURL = await toBlobURL(
"https://unpkg.com/@ffmpeg/core@0.12.10/dist/ffmpeg-core.js",
"text/javascript"
);
const wasmURL = await toBlobURL(
"https://unpkg.com/@ffmpeg/core@0.12.10/dist/ffmpeg-core.wasm",
"application/wasm"
);
await ffmpeg.load({ coreURL, wasmURL });
log.innerHTML = "✅ ffmpeg.wasm 加载完成<br>";
}
// 转码主逻辑：示例：任意视频 → webm
async function transcode() {
const file = document.getElementById("fileInput").files[0];
if (!file) return alert("请选择文件");
if (!ffmpeg.loaded) await loadFFmpeg();
// 写入文件到虚拟文件系统
await ffmpeg.writeFile("input", await fetchFile(file));
// 执行 ffmpeg 命令（同命令行）
await ffmpeg.exec([
"-i", "input",
"-c:v", "libvpx", "-c:a", "libvorbis",
"output.webm"
]);
// 读取结果并下载
const data = await ffmpeg.readFile("output.webm");
const blob = new Blob([data.buffer], { type: "video/webm" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "output.webm";
a.click();
}
</script>
</body>
</html>
二、关键步骤说明
-
引入依赖
@ffmpeg/ffmpeg：JS 封装层@ffmpeg/util：工具函数（文件处理）@ffmpeg/core：WASM 核心（必须加载）
-
初始化
- 新建
FFmpeg实例 - 用
toBlobURL加载核心，解决跨域 / 内存问题 - 监听
log事件看输出
- 新建
-
文件操作
ffmpeg.writeFile：写入浏览器虚拟文件系统ffmpeg.exec([...args])：执行 FFmpeg 命令（和 CLI 一致）ffmpeg.readFile：读取结果
-
导出下载
- 转成
Blob+URL.createObjectURL生成下载链接
- 转成
三、常用命令（直接替换 exec 参数）
- 转 MP4
js
await ffmpeg.exec([ "-i", "input", "-c:v", "libx264", "-c:a", "aac", "output.mp4" ]); - 提取音频
js
await ffmpeg.exec(["-i", "input", "-q:a", "0", "-map", "a", "output.mp3"]); - 获取信息（FFprobe）
js
await ffmpeg.exec(["-i", "input"]); // 日志里看流信息
四、必知注意事项
-
必须 HTTP/HTTPS 打开本地直接打开
file://会跨域失败，用 VSCode Live Server 或本地服务器运行。 -
跨域问题自己部署时，把
core.js/core.wasm放在同域，或服务器配置 CORS。 -
内存与大文件视频越大越慢，建议限制分辨率 / 时长，可用多线程版
@ffmpeg/core-mt。
五、npm 项目引入（Vue/React）
bash
运行
npm install @ffmpeg/ffmpeg @ffmpeg/util @ffmpeg/core
js
import { FFmpeg } from "@ffmpeg/ffmpeg";
import { fetchFile, toBlobURL } from "@ffmpeg/util";
// 后续逻辑同上
人人皆为创造者，共创方能共成长
每个人都是使用者，也是创造者；是数字世界的消费者，更是价值的生产者与分享者。在智能时代的浪潮里，单打独斗的发展模式早已落幕，唯有开放连接、创意共创、利益共享，才能让个体价值汇聚成生态合力，让技术与创意双向奔赴，实现平台与伙伴的快速成长、共赢致远。
原创永久分成，共赴星辰大海
原创创意共创、永久收益分成，是东方仙盟始终坚守的核心理念。我们坚信，每一份原创智慧都值得被尊重与回馈，以永久分成锚定共创初心，让创意者长期享有价值红利，携手万千伙伴向着科技星辰大海笃定前行，拥抱硅基 生命与数字智能交融的未来，共筑跨越时代的数字文明共同体。
东方仙盟：拥抱知识开源，共筑数字新生态
在全球化与数字化浪潮中，东方仙盟始终秉持开放协作、知识共享的理念，积极拥抱开源技术与开放标准。我们相信，唯有打破技术壁垒、汇聚全球智慧，才能真正推动行业的可持续发展。
开源赋能中小商户：通过将前端异常检测、跨系统数据互联等核心能力开源化，东方仙盟为全球中小商户提供了低成本、高可靠的技术解决方案，让更多商家能够平等享受数字转型的红利。
共建行业标准：我们积极参与国际技术社区，与全球开发者、合作伙伴共同制定开放协议 与技术规范，推动跨境零售、文旅、餐饮等多业态的系统互联互通，构建更加公平、高效的数字生态。
知识普惠，共促发展：通过开源社区 、技术文档与培训体系，东方仙盟致力于将前沿技术转化为可落地的行业实践，赋能全球合作伙伴，共同培育创新人才，推动数字经济 的普惠式增长
阿雪技术观
在科技发展浪潮中，我们不妨积极投身技术共享。不满足于做受益者，更要主动担当贡献者 。无论是分享代码、撰写技术博客，还是参与开源项目 维护改进，每一个微小举动都可能蕴含推动技术进步的巨大能量。东方仙盟是汇聚力量的天地，我们携手在此探索硅基 生命，为科技进步添砖加瓦。
Hey folks, in this wild tech - driven world, why not dive headfirst into the whole tech - sharing scene? Don't just be the one reaping all the benefits; step up and be a contributor too. Whether you're tossing out your code snippets , hammering out some tech blogs, or getting your hands dirty with maintaining and sprucing up open - source projects, every little thing you do might just end up being a massive force that pushes tech forward. And guess what? The Eastern FairyAlliance is this awesome place where we all come together. We're gonna team up and explore the whole silicon - based life thing, and in the process, we'll be fueling the growth of technology
openEuler 是由开放原子开源基金会孵化的全场景开源操作系统项目，面向数字基础设施四大核心场景（服务器、云计算、边缘计算、嵌入式），全面支持 ARM、x86、RISC-V、loongArch、PowerPC、SW-64 等多样性计算架构
更多推荐
10
0- 0
已为社区贡献3条内容
所有评论(0)