尝试ffmpeg进行上传前压缩视频
目前尝试浏览器H5版本可以压缩
<script src="https://unpkg.com/@ffmpeg/[email protected]/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/[email protected]/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效果还是可以的！