搜索

+

95

-

浏览器端上传视频如何自动压缩后上传？

html5 javascript 音视频

浏览器端上传视频如何自动压缩后上传？

网友回复

+

15

-

实现浏览器端视频压缩的流程如下：

选择视频文件：首先，你需要允许用户通过一个<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
     ...

点击查看剩余70%

我知道答案，我要回答

我有问题

私活外包

最新提问