Flutter视频缩略图生成插件video_thumb_getter的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter视频缩略图生成插件video_thumb_getter的使用

video_thumb_getter 插件用于从视频文件或URL生成缩略图。它可以将图像返回到内存中,也可以写入到文件中。它提供了丰富的选项来控制图像格式、分辨率和质量,并支持iOS、Android和Web平台。

方法

函数名 参数 描述 返回值
thumbnailData String [video], 可选 Map<String, dynamic> [headers], ImageFormat [imageFormat], int [maxHeight], int [maxWidth], int [timeMs], int [quality] [video] 生成缩略图 Future<Uint8List>
thumbnailFile String [video], 可选 Map<String, dynamic> [headers], String [thumbnailPath], ImageFormat [imageFormat], int [maxHeight], int [maxWidth], int [timeMs], int [quality] [video] 创建缩略图文件并保存到 [thumbnailPath] (在Web上忽略此参数) Future<String>

警告

  • 如果同时指定了 maxHeightmaxWidth,在Android平台上,它会实际将缩略图缩放到指定的高度和宽度。
  • 若要从网络资源生成缩略图,video 必须正确地进行URL编码。

使用

安装

pubspec.yaml 文件中添加 video_thumb_getter 作为依赖项:

dependencies:
  video_thumb_getter: ^0.1.3

导入

import 'package:video_thumb_getter/video_thumb_getter.dart';

从视频文件生成内存中的缩略图

final uint8list = await VideoThumbnail.thumbnailData(
  video: videofile.path,
  imageFormat: ImageFormat.JPEG,
  maxWidth: 128, // 指定缩略图的宽度,高度自动按源宽高比缩放
  quality: 25,
);

从视频URL生成文件缩略图

XFile thumbnailFile = await VideoThumbnail.thumbnailFile(
  video: "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4",
  thumbnailPath: (await getTemporaryDirectory()).path,
  imageFormat: ImageFormat.WEBP,
  maxHeight: 64, // 指定缩略图的高度,宽度自动按源宽高比缩放
  quality: 75,
);

final image = kIsWeb ? Image.network(thumbnailFile.path) : Image.file(File(thumbnailFile.path));

从Assets中声明的视频生成文件缩略图

final byteData = await rootBundle.load("assets/my_video.mp4");
Directory tempDir = await getTemporaryDirectory();

File tempVideo = File("${tempDir.path}/assets/my_video.mp4")
  ..createSync(recursive: true)
  ..writeAsBytesSync(byteData.buffer.asUint8List(byteData.offsetInBytes, byteData.lengthInBytes));

final fileName = await VideoThumbnail.thumbnailFile(
  video: tempVideo.path,
  thumbnailPath: (await getTemporaryDirectory()).path,
  imageFormat: ImageFormat.PNG,  
  quality: 100,
);

更多关于Flutter视频缩略图生成插件video_thumb_getter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter视频缩略图生成插件video_thumb_getter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用video_thumb_getter插件来生成视频缩略图的示例代码。video_thumb_getter是一个用于从视频文件中生成缩略图的Flutter插件。

首先,确保你已经在pubspec.yaml文件中添加了video_thumb_getter依赖项:

dependencies:
  flutter:
    sdk: flutter
  video_thumb_getter: ^x.y.z  # 请将x.y.z替换为最新版本号

然后运行flutter pub get来获取依赖项。

接下来,你可以在Flutter项目中按照以下步骤使用video_thumb_getter插件:

  1. 导入插件
import 'package:video_thumb_getter/video_thumb_getter.dart';
  1. 获取视频缩略图

以下是一个完整的示例代码,展示如何使用video_thumb_getter插件来获取视频缩略图并显示在Image widget中。

import 'package:flutter/material.dart';
import 'package:video_thumb_getter/video_thumb_getter.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Thumbnail Generator',
      home: VideoThumbnailScreen(),
    );
  }
}

class VideoThumbnailScreen extends StatefulWidget {
  @override
  _VideoThumbnailScreenState createState() => _VideoThumbnailScreenState();
}

class _VideoThumbnailScreenState extends State<VideoThumbnailScreen> {
  File? _videoFile;
  File? _thumbnailFile;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Thumbnail Generator'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            _videoFile == null
                ? Text('No video selected.')
                : Image.file(_thumbnailFile ?? _videoFile!),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickVideo,
              child: Text('Select Video'),
            ),
          ],
        ),
      ),
    );
  }

  Future<void> _pickVideo() async {
    final result = await FilePicker.platform.pickFiles(
      type: FileType.video,
      allowMultiple: false,
    );

    if (result != null && result.files.isNotEmpty) {
      setState(() {
        _videoFile = File(result.files.single.path!);
        _generateThumbnail();
      });
    }
  }

  Future<void> _generateThumbnail() async {
    if (_videoFile != null) {
      try {
        final thumbnailFile = await VideoThumbnail.thumbnailData(
          video: _videoFile!,
          imageFormat: ImageFormat.JPEG,
          quality: 25,
          position: 5.0, // 指定生成缩略图的时间点(秒)
        );

        setState(() {
          _thumbnailFile = File(thumbnailFile!.path);
        });
      } catch (e) {
        print('Error generating thumbnail: $e');
      }
    }
  }
}

解释

  1. 依赖导入:首先导入video_thumb_getter插件。
  2. UI结构:使用ScaffoldAppBarColumnTextImageElevatedButton等组件构建UI。
  3. 文件选择:使用file_picker插件来选择视频文件(注意:video_thumb_getter本身不提供文件选择功能,这里为了示例方便,使用了file_picker插件)。
  4. 生成缩略图:调用VideoThumbnail.thumbnailData方法来生成缩略图,并将结果文件路径保存到_thumbnailFile变量中。

注意事项

  • 确保你的项目中已经添加了file_picker依赖项,因为示例代码使用了它来选择视频文件。
  • 根据需要调整生成缩略图的时间点(position参数)。
  • 处理错误和异常,例如文件不存在或读取失败的情况。

以上代码提供了一个完整的示例,展示了如何在Flutter项目中使用video_thumb_getter插件来生成视频缩略图。

回到顶部