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

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

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

本项目是John Zhong最初创建并由Abdul Rehman更新的video_thumbnail_pro的一个修改版本。我们对其进行了调整以满足新的需求。

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

video-file video-url

方法

函数名 参数 描述 返回值
thumbnailData String [video], 可选 Map<String, dynamic> [headers], ImageFormat [imageFormat](JPEG/PNG/WEBP), int [maxHeight](0: 原始分辨率,或按源宽高比缩放), int [maxWidth](0: 原始分辨率,或按源宽高比缩放), int [timeMs] 生成指定毫秒处的帧的缩略图, int [quality](0-100) [video] 生成缩略图 Future<Uint8List>
thumbnailFile String [video], 可选 Map<String, dynamic> [headers], String [thumbnailPath](保存缩略图的文件夹或完整路径,为null时则保存在与视频文件相同的文件夹下,web平台上忽略此参数), ImageFormat [imageFormat](JPEG/PNG/WEBP), int [maxHeight](0: 原始分辨率,或按源宽高比缩放), int [maxWidth](0: 原始分辨率,或按源宽高比缩放), int [timeMs] 生成指定毫秒处的帧的缩略图, int [quality](0-100) [video] 创建缩略图文件 Future<String>

警告:

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

使用方法

安装

在你的 pubspec.yaml 文件中添加 video_thumbnail_pro 作为依赖项。

dependencies:
  video_thumbnail_pro: ^0.7.3

导入

import 'package:video_thumbnail_pro/video_thumbnail_pro.dart';

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

final uint8list = await VideoThumbnailPro.thumbnailData(
  video: videofile.path,
  imageFormat: ImageFormat.JPEG,
  maxWidth: 128, // 指定缩略图的宽度,高度自动缩放以保持原始宽高比
  quality: 25,
);

从视频URL生成文件缩略图

XFile thumbnailFile = await VideoThumbnailPro.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 VideoThumbnailPro.thumbnailFile(
  video: tempVideo.path,
  thumbnailPath: (await getTemporaryDirectory()).path,
  imageFormat: ImageFormat.PNG,  
  quality: 100,
);

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

1 回复

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


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

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

dependencies:
  flutter:
    sdk: flutter
  video_thumbnail_pro: ^0.0.4  # 请检查最新版本号

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

接下来,你可以在你的Flutter项目中使用video_thumbnail_pro插件来生成视频缩略图。以下是一个完整的示例代码:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  File? thumbnailImage;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Video Thumbnail Generator'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  // 视频文件路径,可以是本地路径或资产路径
                  String videoPath = 'path/to/your/video.mp4';
                  
                  // 使用video_thumbnail_pro生成缩略图
                  File? thumbnail = await VideoThumbnailPro.thumbnailData(
                    video: videoPath,
                    imageFormat: ImageFormat.JPEG, // 可以选择PNG或JPEG
                    quality: 50, // 质量,范围0-100
                    timeMs: 1000, // 生成缩略图的时间点,单位毫秒(1秒)
                  );

                  setState(() {
                    thumbnailImage = thumbnail;
                  });
                },
                child: Text('Generate Thumbnail'),
              ),
              SizedBox(height: 20),
              if (thumbnailImage != null)
                Image.file(thumbnailImage!),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中:

  1. 我们首先定义了MyApp_MyAppState类。
  2. _MyAppState类中,我们声明了一个thumbnailImage变量来存储生成的缩略图文件。
  3. build方法中,我们构建了一个简单的UI,包含一个按钮和一个用于显示缩略图的Image组件。
  4. 当用户点击按钮时,onPressed方法会调用VideoThumbnailPro.thumbnailData方法来生成缩略图。你需要提供视频文件的路径、图像格式、质量和生成缩略图的时间点(以毫秒为单位)。
  5. 生成缩略图后,我们使用setState方法来更新thumbnailImage变量,以便UI能够重新构建并显示缩略图。

请确保将videoPath替换为你实际视频文件的路径。如果你使用的是本地视频文件,请确保该文件在你的项目中存在并且路径正确。如果你使用的是Flutter资产,你可能需要先将视频文件复制到设备的本地存储中,然后再生成缩略图。

回到顶部