ffmpeg.js视频播放(转换)

最新推荐文章于 2025-04-28 10:52:40 发布

原创最新推荐文章于 2025-04-28 10:52:40 发布 · 1.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ffmpeg.js #视频播放视频转换

流媒体同时被 3 个专栏收录

34 篇文章

订阅专栏

ffmpeg

25 篇文章

订阅专栏

node.js

13 篇文章

订阅专栏

chrome 临时设置SharedArrayBuffer

"C:\Program Files\Google\Chrome\Application\chrome.exe" --enable-features=SharedArrayBuffer

引用的js及相关文件

ffmpeg.min.js

ffmpeg.min.js.map

ffmpeg-core.js

ffmpeg-core.wasm

ffmpeg-core.worker.js

以上几个现成的文件可以在以下链接中获取

https://blog.csdn.net/jchsgwbr/article/details/143252044
https://gitee.com/CXBalCai/ffmpeg-template

视频转换速度有点慢(打开注释的两行代码即可)，视频播放可以播放大部分mp4视频，少部分mp4只能放音频（应该是代码里Blob指定了mp4格式所致）

html文件，tomcat服务启动后，作为webapp运行。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FFmpeg.js Demo</title>
<script src="ffmpeg.min.js"></script>
</head>
<body>
<h1>FFmpeg.js 示例</h1>
<input type="file" id="upload" accept="video/*">

<button id="convert">播放视频</button>
<video id="output" controls></video>

const reader = new FileReader();
reader.onload = async (event) => {
const data = new Uint8Array(event.target.result);
const result = await FFmpeg.createFFmpeg({ log: true });
await result.load();
result.FS('writeFile', 'input.mp4', data);
//await result.run('-i', 'input.mp4', 'output.mp4');
//const outputData = result.FS('readFile', 'output.mp4');
const outputData = result.FS('readFile', 'input.mp4');

const blob = new Blob([outputData.buffer], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
document.getElementById('output').src = url;
};
reader.readAsArrayBuffer(file);
};
</script>
</body>
</html>