ffmpeg.js视频播放(转换)

news2024/11/27 9:18:09

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2248324.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！