浏览器端上传视频如何自动压缩后上传？
网友回复
实现浏览器端视频压缩的流程如下：
选择视频文件：首先，你需要允许用户通过一个<input type="file">标签来选择他们想要上传的视频文件。
读取视频文件：使用JavaScript的FileReader API来读取用户选择的视频文件。
压缩视频：这是一个相对复杂的过程，因为浏览器原生并不支持压缩视频文件。你可以借助一些JavaScript库，比如ffmpeg.js（一个基于FFmpeg的WebAssembly版本）来在客户端进行视频压缩。有一定的性能限制，压缩较大的视频文件可能会很慢。
使用ffmpeg.js可以执行视频压缩的任务，你需要在<script>标签中包含库的源文件，并在用户选择文件后实例化FFmpeg并压缩视频。
上传视频：压缩完成后，你可以使用XMLHttpRequest或fetch API将压缩后的视频上传到服务器。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Upload with Compression</title>
<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script>
</head>
<body>
<input type="file" id="upload" accept="video/*"/>
<script>
document.getElementById('upload').addEventListener('change', async event => {
const file = event.target.files[0];
if (file) {
// FFmpeg instance
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
// Load FFmpeg
await ffmpeg.load();
// Write the file to FFmpeg file system
ffmpeg.FS('writeFile', file.name, await fetchFile(file));
// Run FFmpeg command for compressing the video
await ffmpeg.run('-i', file.name, '-c:v', 'libx264', '-b:v', '1M', 'output.mp4');
// Read the result
const data = ffmpeg.FS('readFile', 'output.mp4');
// Create a Blob from the data
const videoBlob = new Blob([data.buffer], { type: 'video/mp4' });
// Preview of the compressed video
const videoURL = URL.createObjectURL(videoBlob);
const videoElement = document.createElement('video');
videoElement.src = videoURL;
videoElement.controls = true;
document.body.appendChild(videoElement);
// Upload the video
const formData = new FormData();
formData.append('video', videoBlob, 'output.mp4');
try {
const response = await fetch('YOUR_SERVER_ENDPOINT', {
method: 'POST',
body: formData
});
console.log('Upload successful:', response);
} catch (error) {
console.error('Upload failed:', error);
}
}
});
</script>
</body>
</html>注意：需要设置header防止报错：Uncaught (in promise) ReferenceError: SharedArrayBuffer is not definedheader('Cross-Origin-Opener-Policy: same-origin');
header('Cross-Origin-Embedder-Policy: require-corp');参考点击打开链接
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
