嘗試ffmpeg進行上傳前壓縮視頻
目前嘗試瀏覽器H5版本可以壓縮

<script src="https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><h2>視頻前端壓縮</h2> <video id="video" controls></video><br/> <input type="file" id="upload"> <p id="text"></p> <script>const { createFFmpeg, fetchFile } = FFmpeg;const text = document.getElementById('text');const ffmpeg = createFFmpeg({log: true,progress: ({ ratio }) => {text.innerHTML = `完成率: ${(ratio * 100.0).toFixed(2)}%`;},});const transcode = async ({ target: { files } }) => {const { name } = files[0];text.innerHTML = '正在加載 ffmpeg-core.js';await ffmpeg.load();text.innerHTML = '開始壓縮';ffmpeg.FS('writeFile', name, await fetchFile(files[0]));// '-b','2000000' 值越小 壓縮率越大await ffmpeg.run('-i', name,'-b','2000000','put.mp4');text.innerHTML = '壓縮完成';const data = ffmpeg.FS('readFile', 'put.mp4');const video = document.getElementById('video');video.src = URL.createObjectURL(new Blob([data.buffer], {type: 'video/mp4'}));}document.getElementById('upload').addEventListener('change', transcode);</script>

ffmepg地址：https://unpkg.com/@ffmpeg/ffmpeg@0.9.5/dist/ffmpeg.min.js

嘗試了H5版小程序，在微信調試工具下和瀏覽器下壓縮是沒問題
企業微信瀏覽器和微信瀏覽器下無效，把我整懵了，著實有點坑

const { createFFmpeg, fetchFile } = require('../../components/ossUpload/ffmpeg.min.js'); uni.chooseVideo({sourceType: ['camera', 'album'],success: function (resdata) {const ffmpeg = createFFmpeg({log: true,progress: ({ ratio }) => {_this.loadText = `${(ratio * 100.0).toFixed(2)}%`console.log(`完成率: ${(ratio * 100.0).toFixed(2)}%`)}});const transcode = async (files) => {const { name } = files;_this.uploadLoad = true_this.loadText = "壓縮中"console.log('正在加載 ffmpeg-core.js')await ffmpeg.load();console.log('開始壓縮')ffmpeg.FS('writeFile', name, await fetchFile(files));// '-b','2000000' 值越小 壓縮率越大await ffmpeg.run('-i', name,'-b','200000','put.mp4');console.log('壓縮完成')const data = ffmpeg.FS('readFile', 'put.mp4');let file = new File([data.buffer], name, { type: "video/mp4" });let date = new Date();let currentTime = date.getFullYear() + '-' + (date.getMonth() - 0 + 1) + '-' + date.getDate();let nameArr = name.split('.');let key = currentTime + '/' + Math.floor((Math.random() * 1000000)) + '/' + Math.floor((Math.random() *1000000)) + '.' + nameArr[nameArr.length - 1];let length = _this.fileList.length - 1;let formData = {key:key,token:_this.formData['token']}await _this.uploadFile(file, formData, length)}transcode(resdata.tempFile)} });

注：‘-b’,‘2000000’，通過修改比特率來達到壓縮視頻的效果，2000000，這個壓縮效果很不錯，親測
還可以用 -crf 方式壓縮，設置 -qscale質量參數壓縮視頻，不過這種方式只支持x264
ffmepg命令參數說明：https://www.cnblogs.com/chen1987lei/archive/2010/12/03/1895242.html

視頻倒放：await ffmpeg.run(‘-i’, name,‘-vf’, “reverse”,‘put.mp4’); 視頻剪切：
await ffmpeg.run(‘-ss’,‘00:00:00’,‘-t’,‘00:00:05’,‘-i’,
name,‘-vcodec’, “copy”,“-acodec”,“copy”,‘put.mp4’);

去除視頻背景音樂：
只需將上面命令加上 ‘-an’ 去除音頻

如：await ffmpeg.run(‘-i’, name,‘-an’,‘-b’,‘2000000’,‘put.mp4’); 即可

網頁H5效果還是可以的！

總結

以上是生活随笔為你收集整理的H5-ffmpeg.js压缩视频的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。