@charset "UTF-8";
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 15px; overflow-x: hidden; color: rgba(43, 43, 43, 1); font-family: -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; background-image: linear-gradient(90deg, rgba(159, 219, 252, 0.15) 3%, rgba(0, 0, 0, 0) 0), linear-gradient(1turn, rgba(159, 219, 252, 0.15) 3%, rgba(0, 0, 0, 0) 0); background-size: 20px 20px; background-position: center }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { padding: 30px 0; margin-top: 35px; margin-bottom: 10px; color: rgba(77, 208, 225, 1) }
.markdown-body h1 { font-size: 30px; text-align: center; position: relative; width: max-content; margin: 0 auto }
.markdown-body h1:before { position: absolute; content: ""; z-index: -1; top: -20px; height: 100%; width: 100px; left: 0; right: 0; margin: 0 auto; background: url("data:image/png;base64,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") center / 64px 64px no-repeat; opacity: 0.84 }
.markdown-body h1:after { position: absolute; content: ""; width: 150%; left: -25%; height: 50%; bottom: 12px; border-radius: 50%; background: linear-gradient(rgba(0, 0, 0, 0) 80%, rgba(77, 208, 225, 0.8)); opacity: 0.6; animation: 6s linear infinite h1animate }
@keyframes h1Animate { 0% { background-position: right bottom } 50% { background-position: right } 100% { background-position: right bottom } }
.markdown-body h2 { display: block; border-bottom: 4px solid rgba(77, 208, 225, 1); position: relative; font-size: 24px; padding: 12px 32px; margin: 30px 0 }
.markdown-body h2:before { width: 24px; height: 24px; left: 0; top: 0; margin: auto; background-size: 24px 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADGklEQVRYR81X32vTYBQ999s6mFjQgQ+DrbHiVFZYU4cDcQ/6pGhTFVYFEXGi82H+Bz448UnEF1Fx9ccEEcXpZE3d5tP2ooKiTacTHaLNpigMHDgnU9tcSbrWrkwWR0sbyEOSe885ObnfvV8IRT6oyPwoLQHBx+OVM5WJvSyEVAhnBOjt7yU/+/rr6r6l8TMO+F/EN0JQhICqQpD/xaRpcpAc9tS+M+9lBCia/oqBamK+zeDuQogQZaKJk3wcQjxSva7tGQGB2Ke1zIk3DNyMyNL+QpCnMQOaPsDAVuGAp9cjvbYc8Ec/bCYSg0zoiHilk1tHxqsqEsYlML4kjIpT/eurJxRNPweQU5VdrWaOEo1fgKAVbBgXIz73kF3R/ph+ghgdzMYWM29eAWlBJqgZaFlFYtC6nhWpaDqnSGlIlV1WjJ3DloDNgyNLncudqgX//Ucg3LxuStHGuhi8pqKCW3rqV342rwFjRznKm+/LNaN2yC237ThgF2wxcfMLeP6+ncrKzoPoKTGeLQbYbg4TNoC5iZPJY5HGVRdSNZAWYBclD3FzBQzrR8hACAKdzBzKA/4/IYioDQaOskBbpEG6PO8qKKSAEi3CnEb0Pw4oMf0OmKbTDWqh3Lw6EIiNBZi5lxh3wz4puBD5ovqAMvxhHSdFKxE1CQe3m/07TeTX4lcJdAhE+1Sv65Z5P/ByvIGTRowIZ9igbtXnmrOsbTvgj+kHBNMuBu9OdVw8EeU4nC1A0cYmAHZOTRrLhra4Z8ywnSN6vZHAFTA2WnnMfQB3qz73ddsOZM8CACFDIPSgQXqebXEgqgeZcAeEe6pXasm1f8ew3igMtAHWac0Uc/jYdyAaP0xEBwFsmgUPqbJ0NE2UKj4EGcahiOzuyhagaHpnmtgcVgTcCMuua7YdyAHbA3ArQNscVFbb4635aD6fnYaTvxxi9UNP7ddMXaRWVBdAcaLk6bDXPZCNZ9uBXEsDUX1T2Cc9yjig6Z0EHg3LK8/aqf6MwJKchkXfks1+0+JtSq3qLPa23BRR1B+T/6nkfMaW1r9hPt/MLtYfTLEpP+T9FNoAAAAASUVORK5CYII=") }
.markdown-body h2:after, .markdown-body h2:before { content: ""; display: block; position: absolute; bottom: 0 }
.markdown-body h2:after { right: 0; width: 400px; height: 10px; border-top-right-radius: 24px; background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(77, 208, 225, 1)); max-width: 50vw }
.markdown-body h3 { margin: 30px 0; font-size: 18px; position: relative; padding: 4px 32px; width: max-content }
.markdown-body h3:before { border-bottom: 2px solid rgba(77, 208, 225, 1); width: 100%; content: ""; display: block; height: 28px; position: absolute; left: 0; top: 0; bottom: -2px; margin: auto; background-size: 28px 28px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII="); background-repeat: no-repeat; animation: 2s infinite alternate h3animationbefore }
@keyframes h3AnimationBefore { 0% { width: 28px } 25% { width: 100% } 50% { width: 100% } 100% { width: 100% } }
.markdown-body h3:after { content: ""; display: block; width: 28px; height: 28px; position: absolute; border: 2px solid rgba(77, 208, 225, 1); border-radius: 50%; right: -15px; top: 0; bottom: 0; margin: auto; background-size: 28px 28px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABRklEQVRYR2NkGGDAOMD2M4w6YDQERkNg+ITAppcfY/8zMv3wF+NdTUrZQpUQ2PT6cz8Dw/8CkMWMDIwNvqK8jcQ6gmIHNN19EaXPx1XPyMCghrCUKcpPlGc5MY6gyAE+Fx52MjL8j3cU5a1UYWXtZGBkEAVb+p8hxU+Mby5NHQCxnKEMaskzJ37uFmUetkmMjAzrfUX4woixHBJlZAA0y2EmPPYU4enLkhGeQIqRJDsAh+UgO7duNpD3IcVykkOA2paT5ABaWE60A2hlOdEO8D3/4CMDIyMfWvySFefoaYSoROh74eFXBgYGLiTNVLGc+BC48PAnAwMDG9QBVLOcaAd8P5ox+x/jf5AjGLgYfnwnKqv9/8/PwPO/kFF/MSj0cAKiouD/0bgYoixFU8RovWgJIX1EOYCQIZTIjzpgNARGQ2DAQwAAvHBaIdB7zxsAAAAASUVORK5CYII="); animation: 2s infinite alternate h3animationafter }
@keyframes h3AnimationAfter { 0% { } 10% { } 50% { transform: rotate(-1turn) } 100% { transform: rotate(-1turn) } }
.markdown-body h4 { font-size: 16px }
.markdown-body h5 { font-size: 15px }
.markdown-body h6 { margin-top: 5px }
.markdown-body p { line-height: inherit; margin: 22px 0; letter-spacing: 2px; font-size: 14px; word-spacing: 2px }
.markdown-body img { max-width: 80%; border-radius: 6px; display: block; margin: 20px auto !important; object-fit: contain; box-shadow: 0 0 16px rgba(110, 110, 110, 0.45) }
.markdown-body figcaption { display: block; font-size: 13px; color: rgba(43, 43, 43, 1) }
.markdown-body figcaption:before { content: ""; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEVHcExAuPtAuPpAuPtAuPpAuPtAvPxAuPokzOX5AAAAB3RSTlMAkDLqNegkoiUM7wAAAGBJREFUKM9jYBhcgMkBTUDVBE1BeDGqEtXychNUBeXlKEqACsrLQxB8lnCQQClCiWt5OYoSiAIkJVAF5eVBqAqAShTAAs7l5ShKWMwRAmAlSArASpAVgJUkCqIAscESHwCVVjMBK9JnbQAAAABJRU5ErkJggg=="); display: inline-block; width: 18px; height: 18px; background-size: 18px; background-repeat: no-repeat; background-position: center; margin-right: 5px; margin-bottom: -5px }
.markdown-body hr { border-top: 1px solid rgba(77, 208, 225, 1); border-right: none; border-bottom: none; border-left: none; margin-top: 32px; margin-bottom: 32px }
.markdown-body del { color: rgba(77, 208, 225, 1) }
.markdown-body code { border-radius: 2px; overflow-x: auto; background-color: rgba(77, 208, 225, 0.08); color: rgba(38, 198, 218, 1); padding: 0.195em 0.4em }
.markdown-body pre { font-family: Menlo, Monaco, Consolas, Courier New, monospace; overflow: auto; position: relative; line-height: 1.75; box-shadow: 0 0 8px rgba(110, 110, 110, 0.45); border-radius: 4px; margin: 16px }
.markdown-body pre:before { content: ""; display: block; height: 30px; width: 100%; margin-bottom: -7px; background: url("data:image/png;base64,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") 10px 10px / 40px no-repeat }
.markdown-body pre>code { font-size: 12px; padding: 15px 12px; margin: 0; word-break: normal; display: block; overflow-x: auto; color: rgba(51, 51, 51, 1); background: rgba(248, 248, 248, 1) }
.markdown-body a { color: rgba(77, 208, 225, 1); border-bottom: 1px solid rgba(77, 208, 225, 1); font-weight: 400; text-decoration: none; margin: 0 4px }
.markdown-body a:active, .markdown-body a:hover { background-color: rgba(77, 208, 225, 0.1) }
.markdown-body strong { color: rgba(38, 198, 218, 1) }
.markdown-body strong:before { content: "「" }
.markdown-body strong:after { content: "」" }
.markdown-body em { font-style: normal; color: rgba(77, 208, 225, 1); font-weight: 700 }
.markdown-body table { display: inline-block !important; font-size: 12px; width: auto; max-width: 100%; overflow: auto; border: 1px solid rgba(246, 246, 246, 1) }
.markdown-body thead { background: rgba(246, 246, 246, 1); color: rgba(0, 0, 0, 1); text-align: left }
.markdown-body tr:nth-child(2n) { background-color: rgba(77, 208, 225, 0.05) }
.markdown-body td, .markdown-body th { padding: 12px 7px; line-height: 24px }
.markdown-body td { min-width: 120px }
.markdown-body blockquote { margin: 2em 0; padding: 24px 32px; border-left: 4px solid rgba(38, 198, 218, 1); background: rgba(77, 208, 225, 0.15); position: relative }
.markdown-body blockquote:before { content: "❝"; top: 8px; left: 8px; color: rgba(77, 208, 225, 1); font-size: 30px; line-height: 1; font-weight: 700; position: absolute; opacity: 0.7 }
.markdown-body blockquote:after { content: "❞"; font-size: 30px; position: absolute; right: 8px; bottom: 0; color: rgba(77, 208, 225, 1); opacity: 0.7 }
.markdown-body blockquote p { color: rgba(89, 89, 89, 1); line-height: 2 }
.markdown-body ol, .markdown-body ul { color: rgba(89, 89, 89, 1); padding-left: 28px }
.markdown-body ol li, .markdown-body ul li { margin-bottom: 0; list-style: inherit }
.markdown-body ol li .task-list-item, .markdown-body ul li .task-list-item { list-style: none }
.markdown-body ol li .task-list-item ol, .markdown-body ol li .task-list-item ul, .markdown-body ul li .task-list-item ol, .markdown-body ul li .task-list-item ul { margin-top: 0 }
.markdown-body ol ol, .markdown-body ol ul, .markdown-body ul ol, .markdown-body ul ul { margin-top: 3px }
.markdown-body ol li { padding-left: 6px }
@media (max-width: 720px) { .markdown-body h1 { font-size: 24px } .markdown-body h2 { font-size: 20px } .markdown-body h3 { font-size: 18px } }.hljs-comment, .hljs-quote { color: rgba(212, 208, 171, 1) }
.hljs-deletion, .hljs-name, .hljs-regexp, .hljs-selector-class, .hljs-selector-id, .hljs-tag, .hljs-template-variable, .hljs-variable { color: rgba(255, 160, 122, 1) }
.hljs-built_in, .hljs-builtin-name, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-type { color: rgba(245, 171, 53, 1) }
.hljs-attribute { color: rgba(255, 215, 0, 1) }
.hljs-addition, .hljs-bullet, .hljs-string, .hljs-symbol { color: rgba(171, 227, 56, 1) }
.hljs-section, .hljs-title { color: rgba(0, 224, 224, 1) }
.hljs-keyword, .hljs-selector-tag { color: rgba(220, 198, 224, 1) }
.markdown-body pre, .markdown-body pre>code.hljs { background: rgba(43, 43, 43, 1); color: rgba(248, 248, 242, 1) }
.hljs-emphasis { font-style: italic }
.hljs-strong { font-weight: 700 }
@media screen and (-ms-high-contrast: active) { .hljs-addition, .hljs-attribute, .hljs-built_in, .hljs-builtin-name, .hljs-bullet, .hljs-comment, .hljs-link, .hljs-literal, .hljs-meta, .hljs-number, .hljs-params, .hljs-quote, .hljs-string, .hljs-symbol, .hljs-type { color: rgba(181, 213, 255, 1) } .hljs-keyword, .hljs-selector-tag { font-weight: 700 } }

为什么Flutter应用需要视频压缩功能?

移动应用程序中,视频占用了大量的存储空间和带宽。这在一定程度上影响了应用程序的性能和用户体验。因此,在许多应用程序中,我们需要对视频文件进行压缩以优化其大小和质量。通过压缩视频,可以有效地减小视频文件的体积,并且可在保证画质的前提下,大幅降低视频传输和播放时所需的带宽。对于 Flutter 应用程序而言,视频压缩同样也是非常重要的。

常见的视频压缩算法和格式

视频压缩算法可以分为有损压缩和无损压缩两种方式。有损压缩是一种在保证视觉质量的情况下,通过舍弃冗余数据来压缩视频的方式。相反,无损压缩则可保留所有视频数据,但通常需要更大的存储空间。

在实际应用中,我们常用以下几种视频压缩格式:H.264,HEVC,AV1 等等,其中 H.264 是目前移动应用程序中最主流的压缩格式之一,支持广泛,文件体积和清晰度较为平衡。以 Flutter 应用程序为例,我们可以使用 FFmpeg 库进行视频压缩,以支持各种流行的视频压缩格式。接下来,我们将介绍如何使用 FFmpeg 压缩 Flutter 应用程序的视频。

使用FFmpeg库压缩Flutter应用中的视频

如何在Flutter应用中集成FFmpeg库?

若需使用FFmpeg进行视频压缩,我们首先需要将 FFmpeg 库集成到 Flutter 应用程序中。下面是一些基本操作步骤:

  • 从FFmpeg官网下载 FFmpeg 库并解压文件。
  • 在 Flutter 应用程序的 Android 端目录中添加 FFmpeg 的 gradle 依赖项。
  • 在 Flutter 应用程序的 iOS 端目录中添加 FFmpeg 的pod依赖项。
  • 在 Flutter 应用程序使用 FFmpeg 库时初始化所需配置和参数。

以下是一些关键代码步骤和教程供您参考:

1.下载和解压 FFmpeg 库

$ curl -LO http://ffmpeg.org/releases/ffmpeg-<version>.tar.bz2
$ tar jxvf ffmpeg-<version>.tar.bz2

这里需要您自行选择您需要下载的对应版本。

2.添加 FFmpeg 的 gradle 依赖项

在应用程序的 android/app/build.gradle 文件中,添加以下依赖项:

repositories {
jcenter()
} dependencies {
implementation 'com.arthenica:mobile-ffmpeg-full:4.4.LTS'
}

使用上面的依赖项后,我们就可以在应用程序中使用 FFmpeg 库了。

3.在 iOS 端目录中添加 FFmpeg 的pod依赖项

在应用程序的 ios/Podfile 文件中,添加以下依赖项:

target 'Runner' do
use_frameworks! # Pods for Runner
# Add the following line:
pod 'MobileFFmpeg', '4.4.LTS'
end

添加依赖项后,我们可以使用 CocoaPods 更新我们的依赖:

cd ios
pod install

4.初始化FFmpeg库配置和参数

在使用 FFmpeg 进行任何操作之前,我们需要通过一些设置来初始化 FFmpeg 库的基本配置和参数。这一步需要在启动应用程序时进行,根据以下代码执行即可:

import 'package:flutter_video_compress/flutter_video_compress.dart';

FlutterVideoCompress flutterVideoCompress = FlutterVideoCompress();

await flutterVideoCompress.getFFmpegVersion();
flutterVideoCompress.setLogLevel(LogLevel.AV_LOG_ERROR); await flutterVideoCompress.loadFFmpeg();

以上是Flutter中集成 FFmpeg 库的基本代码,这为后续的视频压缩操作打下了必要的基础。接下来,我们将介绍 FFmpeg 库的基本视频压缩操作。

使用FFmpeg库进行视频压缩的基本步骤

在对视频进行压缩之前,我们需要对视频进行解码,并根据要求对其进行重新编码。这个过程需要借助于 FFmpeg 库,并完成以下几个步骤:

  1. 打开输入文件;
  2. 解码输入文件;
  3. 进行需要的操作(如压缩、转换等);
  4. 将操作后的输出写入到输出文件中;
  5. 关闭输入文件和输出文件。
await flutterVideoCompress.executeWithArguments([
'-y',
'-i',
'input.mp4',
'-c:v',
'libx264',
'-crf',
'18',
'-preset',
'superfast',
'-c:a',
'aac',
'-b:a',
'128k',
'-strict',
'-2',
'output.mp4',
]);

该示例中,input.mp4 是我们需要压缩的文件名,通过指定 -c:v libx264 -crf 18 -preset superfast 对视频进行了压缩处理,并且 -c:a aac -b:a 128k 对音频进行了编码,保证音频的质量,最终生成 output.mp4 文件。

这就是使用 FFmpeg 进行视频压缩的基本流程,接下来,我们将详细讲解如何使用 Dart 语言封装 FFmpeg 命令。

使用Dart语言封装FFmpeg命令

在 Flutter 应用程序中使用 FFmpeg 库进行视频压缩时,我们通常需要输入大量的参数才能开始命令执行。为了方便操作,我们常常会使用 Dart 语言的特性来封装 FFmpeg 命令。

通常,我们使用 Process.run 方法执行命令:

import 'dart:convert';
import 'dart:io'; await Process
.run('ffmpeg', ['-i', 'input.mp4', '-vf', 'scale=-1:360', '-c:v', 'libx264', '-preset', 'fast', '-crf', '23', '-ac', '1', '-ar', '44100', '-acodec', 'aac', 'output.mp4'])
.then((ProcessResult result) {
print('standard out:\n${result.stdout}\n');
print('standard in:\n${result.stderr}\n'); String message = result.stderr.toString();
if (message.contains('Cannot find ffmpeg')) {
throw ('${message.toString()}');
}
});

以上示例中,我们使用 Process.run 方法执行 FFmpeg 命令, -i input.mp4指定需要压缩的文件名,-vf scale=-1:360 指定视频框的大小为 360,-c:v libx264 -preset fast -crf 23 是视频压缩参数,-ac 1 -ar 44100 -acodec aac 是音频编码参数,最终我们通过 output.mp4 输出压缩后的视频文件。

然而,对于多次执行相似操作的情况,我们并不希望每次都输入一大堆长串的命令参数。这时候,我们可以使用 Dart 语言中的类来对 FFmpeg 命令进行封装,方便测试和重用。

在以下示例中,我们将基本的 FFmpeg 命令封装在 FFmpegCommands 类中,并通过 toCommand 方法将参数转换为一条命令行命令:

class FFmpegCommands {
String _inputPath;
String _outputPath;
List<String> _videoFilters;
List<String> _audioFilters;
String _crf;
String _bitrate; FFmpegCommands({
@required String inputPath,
@required String outputPath,
List<String> videoFilters,
List<String> audioFilters,
String crf = '23',
String bitrate = '1024k',
}) : assert(inputPath != null),
assert(outputPath != null) {
this._inputPath = inputPath;
this._outputPath = outputPath;
this._videoFilters = videoFilters;
this._audioFilters = audioFilters;
this._crf = crf;
this._bitrate = bitrate;
} String toCommand() {
List<String> commands = [];
commands.addAll([
'ffmpeg',
'-i',
this._inputPath,
]);
if (this._videoFilters != null) {
commands.addAll(['-vf', this._videoFilters.join(',')]);
}
if (this._crf != null) {
commands.addAll(['-crf', this._crf]);
}
if (this._bitrate != null) {
commands.addAll(['-b:a', this._bitrate]);
}
commands.addAll(['-y', this._outputPath]); return commands.join(' ');
}
}

使用 FFmpeg 命令封装类虽然不会改变最终的操作,但能提高重用率和可维护性。下面,我们以例子,具体展示如何使用它进行视频压缩。

void main() async {
FFmpegCommands ffmpegCommands = FFmpegCommands(
inputPath: 'input.mp4',
outputPath: 'output.mp4',
videoFilters: ['scale=-1:360'],
crf: '23',
bitrate: '1024k',
);
await Process
.run(ffmpegCommands.toCommand(), [])
.then((ProcessResult result) {
print(result.stdout);
print(result.stderr);
});
}

在上面这个例子中,我们首先构造了一个 FFmpegCommands 对象,其中包含了全部参数,然后通过 ffmpegCommands.toCommand() 方法生成可执行的命令行命令,最终通过 Process.run 方法执行压缩操作。

以上就是使用 Dart 语言封装 FFmpeg 命令的方法,接下来,我们将结合实例,讲解如何在 Flutter 应用程序中使用 FFmpeg 库进行视频压缩。

Flutter应用中视频压缩的最佳实践

我们将通过实例,介绍在 Flutter 应用程序中如何使用 FFmpeg 库进行视频压缩的最佳实践。

选择最合适的视频压缩算法和格式

在实际应用中,我们根据视频压缩的需求,选择最适合的压缩算法和格式。

  • 尺寸压缩:对于需要压缩视频大小的需求,可以使用 FFmpeg 库中的 scale 滤镜来改变视频的分辨率,从而减小视频文件大小,例如:
String command = 'ffmpeg -i input.mp4 -vf scale=-1:360 output.mp4';
  • 视频编码压缩:在保证视频质量的前提下,可以选择压缩视频的编码格式,例如使用 H.264 或者 HEVC 等。

  • 音频编码压缩:选择合适的音频编码格式也可以减小视频文件大小。

综合考虑需求,我们需要结合实际进行选择。

配置FFmpeg工具进行压缩

在选择完合适的压缩算法和格式后,便可以使用 FFmpeg 工具进行压缩。

String command = 'ffmpeg -i input.mp4 -c:v libx264 -crf 23 -preset fast -c:a aac -b:a 128k output.mp4';

await Process.run(command, []);

在执行命令前,我们需要确保我们已经按照前面所述集成了 FFmpeg 库。除此之外,根据具体需要,我们可以传递不同的参数来实现不同效果的压缩。

例如,如果我们在压缩过程中想要保留视频的宽高比例,我们可以将压缩命令改为:

String command = 'ffmpeg -i input.mp4 -c:v libx264 -filter:v "scale=-1:360:force_original_aspect_ratio=decrease,pad=360:360:(ow-iw)/2:(oh-ih)/2" -crf 23 -preset fast -c:a aac -b:a 128k output.mp4';

这里使用了 pad 滤镜来保持宽高比例,同时使用 force_original_aspect_ratio=decrease 保证视频宽高比不变。

使用Dart语言封装FFmpeg命令

使用 Dart 语言封装 FFmpeg 命令可以让我们更好地进行参数的组合和维护,以下是使用 FFmpeg 命令封装类进行视频压缩的示例:

class FFmpegCommands {
String _inputPath;
String _outputPath;
List<String> _videoFilters;
List<String> _audioFilters;
String _crf;
String _bitrate; FFmpegCommands({
@required String inputPath,
@required String outputPath,
List<String> videoFilters,
List<String> audioFilters,
String crf = '23',
String bitrate = '1024k',
}) : assert(inputPath != null),
assert(outputPath != null) {
this._inputPath = inputPath;
this._outputPath = outputPath;
this._videoFilters = videoFilters;
this._audioFilters = audioFilters;
this._crf = crf;
this._bitrate = bitrate;
} String toCommand() {
List<String> commands = [];
commands.addAll([
'ffmpeg',
'-i',
this._inputPath,
]);
if (this._videoFilters != null) {
commands.addAll(['-vf', this._videoFilters.join(',')]);
}
if (this._crf != null) {
commands.addAll(['-crf', this._crf]);
}
if (this._bitrate != null) {
commands.addAll(['-b:a', this._bitrate]);
}
commands.addAll(['-y', this._outputPath]); return commands.join(' ');
}
} void main() async {
FFmpegCommands ffmpegCommands = FFmpegCommands(
inputPath: 'input.mp4',
outputPath: 'output.mp4',
videoFilters: ['scale=-1:360', 'pad=360:360:(ow-iw)/2:(oh-ih)/2:color=black'],
crf: '23',
bitrate: '1024k',
);
await Process
.run(ffmpegCommands.toCommand(), [])
.then((ProcessResult result) {
print(result.stdout);
print(result.stderr);
});
}

在上述示例中,我们首先定义了 FFmpegCommands 类,然后构造了一个对象来指定 FFmpeg 命令的各个参数,最后通过 toCommand 方法生成可执行的命令行命令,并通过 Process.run 方法执行视频压缩。整个过程中,我们可以自由设置 FFmpeg 命令中的各个参数来实现不同的视频压缩效果。

实现视频压缩进度的更新与回调

在视频压缩过程中,我们通常希望能够实时显示压缩的进度,并提供进度条供用户观察操作进度。为了实现这一目标,我们可以通过监听 FFmpeg 工具的输出流来更新压缩进度。

以下是实现视频压缩进度更新和回调的示例代码:

class VideoCompressUtil {
static final FlutterVideoCompress _flutterVideoCompress = FlutterVideoCompress(); static StreamSubscription _subscription;
static int _prevProgress; static Future<void> compressVideo({
@required String inputPath,
@required String outputPath,
List<String> videoFilters,
List<String> audioFilters,
String crf = '23',
String bitrate = '1024k',
Function(int) onProgress,
}) async {
if (_subscription != null) {
throw 'Another FFmpeg compression is already in progress.';
} int totalDuration = await _flutterVideoCompress.getMediaInformation(inputPath: inputPath).then((info) => info
.duration
.inMilliseconds); int previousPercent = 0; final Completer completer = Completer(); FFmpegCommands cmd = FFmpegCommands(
inputPath: inputPath,
outputPath: outputPath,
videoFilters: videoFilters,
audioFilters: audioFilters,
crf: crf,
bitrate: bitrate,
); String command = cmd.toCommand();
print(command); _prevProgress = 0; _subscription = _flutterVideoCompress.pipe(command).listen((RetrieveData stdout) async {
String data = utf8.decode(stdout.data); if (data.contains('frame=')) {
String progressString = data.split('frame=')[1].split('fps=')[0].trim();
int progress = int.parse(progressString); if (previousPercent != ((progress * 100) ~/ totalDuration)) {
previousPercent = ((progress * 100) ~/ totalDuration);
onProgress(previousPercent);
}
} if (data.contains('Stream mapping')) {
_prevProgress = null;
} if (data.contains('size=')) {
String durString = data.split("Duration:")[1].split(",")[0].trim();
Duration duration = Duration(
hours: int.parse(durString.split(":")[0]),
minutes: int.parse(durString.split(":")[1]),
seconds: int.parse(durString.split(":")[2].split(".")[0]),
milliseconds: int.parse(durString.split(":")[2].split(".")[1])); int totalDuration = duration.inSeconds;
double _progress = 0;
RegExp timeRegExp = new RegExp(r"(?:(\d+):)?(\d{2}):(\d{2})\.(\d{1,3})");
String lastMatch; data.split('\n').forEach((line) {
lastMatch = line; if (line.contains('time=')) {
final match = timeRegExp.allMatches(line).elementAt(0);
final hours = match.group(1) != null ? int.parse(match.group(1)) : 0;
final minutes = int.parse(match.group(2));
final seconds = int.parse(match.group(3)); final videoDurationInSeconds = (hours * 3600) + (minutes * 60) + seconds;
_progress = (videoDurationInSeconds / totalDuration) * 100; if ((_progress - _prevProgress).abs()>= 1.0) {
_prevProgress = _progress.toInt();
onProgress(_prevProgress);
}
}
}); completer.complete();
} // Output FFmpeg log to console.
print(data);
}); await completer.future; await _subscription.cancel();
_subscription = null; _prevProgress = 0;
}
}

在上述代码中,我们定义了 VideoCompressUtil 类,通过内部的 FFmpegCommands 类封装了 FFmpeg 命令,并监听 FFmpeg 工具输出流来实现视频压缩进度的更新和回调。在进行压缩过程中,我们通过传递 onProgress 参数来实现压缩进度的实时更新。

总结

本文介绍了使用 Flutter 开发视频压缩功能的方法,包括集成 FFmpeg 库、使用 FFmpeg 命令进行视频压缩、封装 FFmpeg 命令并实现压缩进度更新和回调等。

在实际开发中,视频压缩是一项经常用到的技术,通过掌握本文所述的方法和技巧,我们可以轻易地实现视频压缩功能,并让用户更好地体验应用的功能和服务,兄弟们赶紧去敲一遍试试。

Flutter视频压缩技术:如何在应用中优化视频文件的质量和大小?的更多相关文章

  1. android 中获取视频文件的缩略图(非原创)

    在android中获取视频文件的缩略图有三种方法: 1.从媒体库中查询 2. android 2.2以后使用ThumbnailUtils类获取 3.调用jni文件,实现MediaMetadataRet ...

  2. [破解] DRM-内容数据版权加密保护技术学习(上):视频文件打包实现

    1. DRM介绍: DRM,英文全称Digital Rights Management, 可以翻译为:内容数字版权加密保护技术. DRM技术的工作原理是,首先建立数字节目授权中心.编码压缩后的数字节目 ...

  3. 显示HDFS中指定的文件读写权限、大小、创建时间、路径等信息。

    1 import org.apache.hadoop.fs.*; 2 import java.text.SimpleDateFormat; 3 public class D_ReadFileStatu ...

  4. Android中直播视频技术探究之---基础知识大纲介绍

    一.前言 最近各种视频直播app到处都是,各种霸屏,当然我们也是需要体验的,关于视频直播的软件这里就不介绍了,在不是技术的人来看,直播是一种潮流,是一种娱乐方式,但是作为一个高技术的,我们除了看看,更 ...

  5. Linux中如何查看文件夹的大小

    直接查看当前文件夹的大小: du –sh 只看文件夹的名字里包含某字符串的子文件夹的大小: du –h –d 1 | grep "BACKEND" 我的linux系统被阉割的比较厉 ...

  6. 如何在微信中发送"相册"文件时有选择性地显示视频文件

    相信很多微信用户在使用微信给朋友,同事发送相册中的文件时,微信会显示你手机中的视频文件,这样很不方便. 如果要完全不显示视频文件: 随便在手机中建立一个文件夹,名字叫 ".nomedia&q ...

  7. Opencv从文件中播放视频

    1.VideoCapture()括号中写视频文件的名字,在播放每一帧的时候,使用cv2.waitKey()设置适当的持续时间,太低会播放的很快,太高会很慢,通常情况下25毫秒就行了. 2.获取相机/视 ...

  8. 【MDCC技术大咖秀】Android内存优化之OOM

    大神分析的很全面,所以就转过来保存一份,转自:http://www.csdn.net/article/2015-09-18/2825737/1 以下为正文: Android的内存优化是性能优化中很重要 ...

  9. 《Spark大数据处理:技术、应用与性能优化 》

    基本信息 作者: 高彦杰 丛书名:大数据技术丛书 出版社:机械工业出版社 ISBN:9787111483861 上架时间:2014-11-5 出版日期:2014 年11月 开本:16开 页码:255 ...

  10. 《Spark大数据处理:技术、应用与性能优化》【PDF】 下载

    内容简介 <Spark大数据处理:技术.应用与性能优化>根据最新技术版本,系统.全面.详细讲解Spark的各项功能使用.原理机制.技术细节.应用方法.性能优化,以及BDAS生态系统的相关技 ...

随机推荐

  1. 基于stm32+esp8266通过阿里云物联网平台和MQTT实现智慧粮仓环境监测管理系统

    基于STM32+ESP8266通过阿里云物联网平台和MQTT实现智慧粮仓环境监测管理系统 技术要点:STM32f407.ESP8266.阿里云物联网平台IOT.MQTT.JSON数据解析. 1.功能与 ...

  2. Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could

    问题分析及解决方案 问题原因: Mybatis没有找到合适的加载类,其实是大部分spring - datasource - url没有加载成功,分析原因如下所示. DataSourceAutoConf ...

  3. 另类方式实现.Net下的多语言

    前言 关于.Net下的多语言方案已经有很多成熟的方案,例如:# Avalonia 国际化之路:Resx 资源文件的深度应用与探索,或者# Avalonia使用XML文件实现国际化,基本都围绕官方的Sa ...

  4. 如何在 PIP 配置文件中设置默认源?

    在不同的操作系统中,在 PIP 配置文件中设置默认源的方法如下: Windows 操作系统 打开文件资源管理器,在地址栏输入 %APPDATA% 并回车,进入用户配置目录. 在该目录下创建一个名为 p ...

  5. “未能加载工具箱项xxx,将从工具箱中将其删除”提示出现原因及解决方案

    https://www.thinbug.com/q/27289366 https://social.msdn.microsoft.com/Forums/vstudio/en-US/77e10b58-4 ...

  6. 面试题58 - I. 翻转单词顺序

    地址:https://leetcode-cn.com/problems/fan-zhuan-dan-ci-shun-xu-lcof/ <?php/**输入一个英文句子,翻转句子中单词的顺序,但单 ...

  7. HTTP Runner 运行提示执行后提示找不到有效的测试用例怎么解决?

    确保yaml文件编写正确 2.yaml文件名称test_xxx.yaml test开头 3.更改httprunner 版本号 pip install httprunner==1.4.2

  8. C#语言碎片:Switch-Case语句字符串匹配

    Switch case语句在处理字符串类型匹配时候,case条件需要设置为静态常量或者一个具体的字符串: 因为工具类ToolHand.Name 为变量,所以编译不通过. 使用if语句来逐个判断: 看A ...

  9. DeepSeek 多模态大模型 Janus-Pro 本地部署教程

    下载模型仓库 git clone https://github.com/deepseek-ai/Janus.git 国内下载仓库失败时,可以使用以下代理: git clone https://gith ...

  10. Joker 可视化开发平台全局方法使用指南

    在 Joker 可视化开发平台中,全局方法是实现公共业务逻辑的有力工具,它能跨越组件和页面文件的界限,让开发者快速调用,显著提升开发效率.下面将详细介绍全局方法在平台中的使用方式. 一.全局方法的定义 ...