雅荷心语博客大名鼎鼎 的 ffmpeg 一直在用, 用来压缩转码视频特别方便, 今天偶然间发现, 居然可以在网页上压缩视频, 于是简单的尝试了一下: 做出记录:
github仓库地址: https://github.com/ffmpegwasm/ffmpeg.wasm
首先, 我用手机拍了一段视频, 一共有30M
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!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> |
压缩之后, 一共是 2.3 M, 就是速度有点慢, 效果还可以, 中途会下载一个 25M 左右的js文件, 因此, 不建议在移动端使用!
上面代码粘贴到html可以直接使用
