Flutter视频滑动控制插件video_slider的使用

Flutter视频滑动控制插件video_slider的使用

video_slider 是一个用于裁剪视频特定区域的简单视频滑块库。

该库受 video_editor 启发。几乎所有的滑块代码都是从该库复制过来的。我所做的只是将滑块从其他依赖项（如播放器、裁剪器和ffmpeg）中提取出来。您可以将这个简单的滑块与其他原始播放器或您想要使用的裁剪方法结合起来。

需求

• sdk: >=2.12.0 <3.0.0
• flutter: >=1.20.0

安装

在您的 pubspec.yaml 文件中添加 video_slider 依赖项：

dependencies:
  video_slider: ^0.0.1

使用

示例

/// 需要将 VideoSlider 包裹在一个具有宽度和高度约束的部件中。
Container(
  width: MediaQuery.of(context).size.width - 40,
  height: 60,
  margin: const EdgeInsets.symmetric(horizontal: 20),
  child: VideoSlider(
    controller: widget.controller,
    height: 60,
    maxDuration: const Duration(seconds: 15),
  ),
)

请参阅 示例 获取更多信息。

完整示例代码

以下是一个完整的示例，展示了如何使用 video_slider 插件来裁剪视频。

import 'dart:io';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:video_slider/video_slider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VideoSlider Demo',
      home: PickerPage(),
    );
  }
}

class PickerPage extends StatefulWidget {
  const PickerPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _PickerPageState createState() => _PickerPageState();
}

class _PickerPageState extends State<PickerPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final assets = await FilePicker.platform.pickFiles(type: FileType.video);
            if (assets != null) {
              final controller = VideoEditorController.file(File(assets.files.single.path!));
              Navigator.push(
                context,
                MaterialPageRoute<bool>(
                  builder: (_) => AppPage(controller),
                ),
              );
            }
          },
          child: Text("Pick Video From Gallery"),
        ),
      ),
    );
  }
}

class AppPage extends StatefulWidget {
  const AppPage(this.controller, {Key? key}) : super(key: key);

  final VideoEditorController controller;

  [@override](/user/override)
  _AppPageState createState() => _AppPageState();
}

class _AppPageState extends State<AppPage> {
  String _positionText = 'Start: \nEnd: ';

  [@override](/user/override)
  void initState() {
    super.initState();
    _init();
  }

  Future<void> _init() async {
    await widget.controller.initialize();
    widget.controller.video.play();
    setState(() {});
  }

  [@override](/user/override)
  void dispose() {
    widget.controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.black,
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: widget.controller.video.value.isInitialized
                    ? AspectRatio(
                        aspectRatio: widget.controller.video.value.aspectRatio,
                        child: VideoPlayer(widget.controller.video),
                      )
                    : const Center(
                        child: Text('Loading...'),
                      ),
              ),
              Align(
                alignment: Alignment.center,
                child: ElevatedButton(
                  child: Text('Print start position time and end position time.'),
                  onPressed: () {
                    final duration = widget.controller.video.value.duration.inSeconds;
                    final start = widget.controller.minTrim * duration;
                    final end = widget.controller.maxTrim * duration;
                    setState(() {
                      _positionText = 'Start: $start\nEnd: $end';
                    });
                  },
                ),
              ),
              if (widget.controller.video.value.isInitialized)
                Positioned(
                  bottom: 100,
                  child: Column(
                    children: [
                      Text(
                        _positionText,
                        style: TextStyle(
                          color: Colors.red,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Container(
                        width: MediaQuery.of(context).size.width - 40,
                        height: 60,
                        margin: const EdgeInsets.symmetric(horizontal: 20),
                        child: VideoSlider(
                          controller: widget.controller,
                          height: 60,
                          maxDuration: const Duration(seconds: 15),
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}