Flutter视频裁剪插件flutter_video_cut的使用

在本教程中，我们将展示如何使用flutter_video_cut插件来裁剪视频。我们将通过一个完整的示例代码来演示该插件的使用方法。

视频操作控制

Getting Started

首先，确保你已经在项目中添加了flutter_video_cut依赖项。打开pubspec.yaml文件并添加以下依赖：

dependencies:
  flutter_video_cut: ^x.x.x  # 请替换为最新版本号

然后运行flutter pub get以安装依赖项。

接下来，我们来看一个完整的示例代码，它展示了如何使用flutter_video_cut插件进行视频裁剪。

示例代码

文件结构

example/
├── lib/
│   └── main.dart

main.dart

import 'dart:io';
import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_video_cut/flutter_video_cut.dart';
import 'package:video_player/video_player.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';

void main() {
  runApp(MaterialApp(home: VideoPage(),));
}

class VideoPage extends StatefulWidget {
  [@override](/user/override)
  _VideoPageState createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {

  String? _oldVideoPath;

  VideoPlayerController? _playerController;

  StateSetter? _setter;

  String? _imgPath;

  late FFVideoCutModel cutModel = FFVideoCutModel();

  late ValueNotifier<int> _progress;

  [@override](/user/override)
  void initState() {
    // 初始化状态
    super.initState();
    _setupState();
  }

  // 初始化状态
  void _setupState() {
    _setter = setState;
    _progress = ValueNotifier(0);
    _test();
  }

  // 设置播放器控制器
  _setupPlayer(String path) {
    _playerController = VideoPlayerController.file(File(path))..initialize().then((value) {
      _setter!.call(() {});
      _playerController!.play();
    });
  }

  // 测试方法
  _test() async {
    var url = 'http://video.training.luojigou.vip/lh_bppTr94lBozn2tpboSZ_mSL-m_low.mp4';
    /*保存到缓存文件*/
    var fileInfo = await DefaultCacheManager().downloadFile(url);
    print('fileInfo===${fileInfo.file.path}');
    
    _oldVideoPath = fileInfo.file.path;

    _setupPlayer(_oldVideoPath!);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(title: Text('视频操作'),),
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              _buildVideoWidget(),
              SizedBox(height: 30,),
              _imgPath == null ? SizedBox() : Container(
                height: 200,
                width: double.infinity,
                child: Image.file(File(_imgPath!), fit: BoxFit.cover,),
              ),
              TextButton(onPressed: _onTapOldPath, child: Text('切换原视频')),
              TextButton(onPressed: _onTapCutPath, child: Text('剪切原视频')),
              TextButton(onPressed: _onTapCoverImg, child: Text('获取封面图')),
              // TextButton(onPressed: _onTapCompressSVGPath, child: Text('压缩分辨率原视频')),
              // TextButton(onPressed: _onTapCompressBitPath, child: Text('压缩码率原视频')),
            ],
          ),
        ),
      ),
    );
  }

  // 构建视频播放组件
  _buildVideoWidget() {
    if (_playerController == null) {
      return SizedBox(height: 300,);
    }
    return Container(
      // color: Colors.green,
        constraints: BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: 300,
        ),
        child: Stack(
          children: [
            _playerController!.value.isInitialized ? AspectRatio(aspectRatio: _playerController!.value.aspectRatio, child: VideoPlayer(_playerController!),) : Container(
              height: 300,
              width: double.infinity,
              child: Center(
                child: SizedBox(),
              ),
            ),
            ValueListenableBuilder<int>(valueListenable: _progress, builder: (ctx, value, child) {
              if (value == 0 || value >= 99) {
                return SizedBox();
              }
              return Container(
                color: Colors.black.withOpacity(0.3),
                width: double.infinity,
                height: double.infinity,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    SizedBox(
                      height: 50,
                      width: 50,
                      child: CircularProgressIndicator(),
                    ),
                    SizedBox(height: 5,),
                    Text('进度${_progress.value}%', style: TextStyle(color: Colors.white),)
                  ],
                ),
              );
            }),
          ],
        )
    );
  }

  // 切换原视频
  _onTapOldPath() {
    _setupPlayer(_oldVideoPath!);
  }

  // 剪切原视频
  _onTapCutPath() async {
    var startValue = 0.0;
    var endValue   = 20.0;
    _playerController!.pause();
    /*进度*/
    FFVideoUtil.getVideoCompressProgress((progress) {
      print('progress:$progress');
      _progress.value = int.parse(progress);
    }, endValue - startValue);

    cutModel = await FFVideoUtil.compressVideo(_oldVideoPath!, startValue: startValue, endValue: endValue);
    _setupPlayer(cutModel.path!);
  }

  // 获取封面图
  _onTapCoverImg() async {
    _imgPath = await FFVideoUtil.getVideoCoverImage(cutModel.path!);
    print('_imgPath===$_imgPath');
    setState(() {});
  }
}