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> -->
<button id="convert">播放视频</button>
<video id="output" controls></video>
<script>
document.getElementById('convert').onclick = async () => {
const fileInput = document.getElementById('upload');
const file = fileInput.files[0];
if (!file) {
alert('请上传一个视频文件');
return;
}
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>
详解)
