Flutter字幕显示插件flutter_captions的使用

安装

要开始使用flutter_captions插件，首先需要在项目的pubspec.yaml文件中添加依赖：

dependencies:
  flutter_captions: ^版本号

然后运行以下命令以获取最新的依赖项：

flutter pub get

示例

您可以从以下示例项目中查看完整的实现：

示例项目

使用

初始化 CaptionWriter

首先，我们需要初始化一个CaptionWriter对象。可以通过默认构造函数或自定义装饰器来完成。

默认构造函数

final writer = CaptionWriter();

自定义装饰器

final writer = CaptionWriter(
  decoration: CaptionWriterDecoration(
    position: CaptionWriterPostion.BottomCenter, // 字幕位置
    fontSize: 12, // 字号
    margins: const EdgeInsets.all(24), // 边距
    shadow: 0.5, // 阴影强度
    outline: 0, // 轮廓宽度
    fontName: 'Arial', // 字体名称
    fontColor: Colors.white, // 字体颜色
    bold: false, // 是否加粗
    italic: false, // 是否斜体
    underlined: false, // 是否下划线
    borderStyle: 0, // 边框样式
    wrapStyle: 0, // 换行样式
    outlineColor: Colors.amber, // 轮廓颜色
  ),
);

添加字幕并生成输出文件

使用CaptionWriter对象的process方法可以将字幕添加到视频中，并返回处理后的文件路径。

String out = await writer.process(File(path), [
  CaptionWriterParams(
    text: 'Hello', // 字幕文本
    time: CaptionWriterTimestamp(start: 65, end: 6500), // 字幕显示时间（毫秒）
  ),
  CaptionWriterParams(
    text: 'Bye',
    time: CaptionWriterTimestamp(start: 6500, end: 16500),
  )
]);

字幕位置

CaptionWriter支持多种字幕位置，具体如下：

• BottomLeft
• BottomCenter
• BottomRight
• CenterLeft
• Center
• CenterRight
• TopLeft
• TopCenter
• TopRight

完整示例代码

以下是一个完整的示例代码，展示了如何使用flutter_captions插件为视频添加字幕。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_captions/flutter_captions.dart';
import 'package:images_picker/images_picker.dart';
import 'package:video_player/video_player.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  VideoPlayerController? controller;
  final writer = CaptionWriter();
  int duration = 0;

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.teal,
          title: Text('Video Caption'),
        ),
        body: Stack(
          fit: StackFit.expand,
          children: [buildContent()],
        ),
      ),
    );
  }

  Widget buildContent() {
    return Column(
      children: [
        TextButton(
          onPressed: () async {
            final v = await ImagesPicker.pick(count: 1, pickType: PickType.video);
            if (v == null) {
              print('error');
              return;
            }
            String path = v.single.path;
            final originalController = VideoPlayerController.file(File(path));
            await originalController.initialize();
            duration = originalController.value.duration.inMilliseconds;
            setState(() {});

            // 添加字幕并生成输出文件
            String out = await writer.process(File(path), [
              CaptionWriterParams(
                text: 'Hello',
                time: CaptionWriterTimestamp(start: 65, end: 6500),
              ),
              CaptionWriterParams(
                text: 'Bye',
                time: CaptionWriterTimestamp(start: 6500, end: 16500),
              )
            ]);

            // 更新视频控制器
            controller = VideoPlayerController.file(File(out));
            await controller?.initialize();
            controller?.play();
            setState(() {});
          },
          child: Container(
            padding: EdgeInsets.all(16),
            color: Colors.green,
            child: Text(
              'Add caption',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        Expanded(
          child: Stack(
            children: [
              // 显示视频
              if (controller != null && (controller?.value.isInitialized ?? false))
                Center(
                  child: Container(
                    padding: EdgeInsets.all(32),
                    child: AspectRatio(
                      aspectRatio: controller!.value.size.aspectRatio,
                      child: Stack(
                        children: [VideoPlayer(controller!)],
                      ),
                    ),
                  ),
                ),
              // 显示进度条
              StreamBuilder<int>(
                stream: writer.timeStream,
                builder: (context, snapshot) {
                  if ((snapshot.data ?? 0) == 0) {
                    return SizedBox();
                  }
                  if (duration == 0) {
                    return Center(
                      child: Text('$duration%'),
                    );
                  }
                  final progress = ((snapshot.data ?? 0) * 100) ~/ duration;
                  return Center(
                    child: Text('$progress%'),
                  );
                },
              )
            ],
          ),
        )
      ],
    );
  }
}