Flutter字幕包装插件subtitle_wrapper的使用

Flutter字幕包装插件subtitle_wrapper的使用

Subtitle Wrapper 插件为在 Flutter 应用程序中使用 VLC 播放器显示字幕提供了一种简便的方法。它支持多种字幕格式，并允许动态调整字幕延迟。

特性

  • 支持从 SRT 和 WebVTT 文件显示字幕。
  • 允许动态调整字幕延迟。
  • 可以自定义字幕文本样式。

开始使用

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  subtitle_wrapper: ^x.x.x

使用

初始化字幕控制器

创建一个 SubtitleController 实例，并指定字幕文件的 URL 和类型。

SubtitleController subtitleController = SubtitleController(
  subtitleUrl: 'https://example.com/subtitles.srt', // 字幕文件URL
  subtitleType: SubtitleType.srt, // 字幕类型
  subtitleDecoder: SubtitleDecoder.utf8, // 字幕解码器
);

设置 VLC 播放器

初始化 VlcPlayerController 并设置视频 URL。

VlcPlayerController vlcPlayerController = VlcPlayerController.network(
  'http://example.com/video.mp4', // 视频文件URL
  autoPlay: true,
);

使用字幕包装器

将 VLC 播放器包裹在 SubtitleWrapper 中以显示字幕。

SubtitleWrapper(
  videoPlayerController: vlcPlayerController,
  universalSubtitleController: subtitleController,
  styleKey: 1,
  subtitleStyle: const SubtitleStyle(
    fontSize: 16,
    textColor: Colors.white,
  ),
)

调整字幕延迟

使用 addSubtitleDelay 和 removeSubtitleDelay 方法来调整字幕延迟（以毫秒为单位）。

// 增加字幕延迟
_subtitleController.addSubtitleDelay(100);

// 减少字幕延迟
_subtitleController.removeSubtitleDelay(100);

示例

以下是一个简单的示例，展示如何在 Flutter 应用中集成字幕包装器。

import 'package:flutter/material.dart';
import 'package:flutter_vlc_player/flutter_vlc_player.dart';
import 'package:subtitle_wrapper/data/models/style/subtitle_style.dart';
import 'package:subtitle_wrapper/subtitle_controller.dart';
import 'package:subtitle_wrapper/subtitle_wrapper.dart';
import 'package:subtitle_wrapper/subtitle_wrapper_package.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VLC Player Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'VLC Player in Stack'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VlcPlayerController _vlcPlayerController;
  late UniversalSubtitleController _subtitleController;
  bool _isPlaying = true;
  double _sliderValue = 0.0;

  [@override](/user/override)
  void initState() {
    super.initState();
    _vlcPlayerController = VlcPlayerController.network(
      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      autoPlay: true,
      options: VlcPlayerOptions(),
    );
    _subtitleController = UniversalSubtitleController(
      subtitleUrl:
          'https://www.opensubtitles.com/download/359337817118D0D29462290D222E3E1DDBF21F0A57BC1518F57249E10AC87A62F0E29F57632274F8A2D21D53833D9F90E45384C9794C3A3CBEA85DC1004048EEF9A336BE0F81C5966B69BE3B4C2DD8820439AAA9FEFDC0CABEBEFDF84DCC33376AA394EFFF28E9D01C953DD2D410BC42603D352E09976055F85CBAFA6F5DE49FFFF3F5087BEFE91976E8E49A5C81A0DCCC50BBCCA465CA5EC5D1D04C3BB8A11D442F0BEC99B82F0FD56CB121B78313B003D53CFDA583DF70BCEB9B8303556FF14F29135CF24F877261B9F40AF0FDB4F1B5B39BAE1799AD6933B652ADAB720A9F2728F21850E41C1E2472C4C5A7EA1DC2D08958C8D84F8A3A/subfile/Iron%20Man.2008.1080p.BluRay.DTS.srt',
      subtitleType: SubtitleType.srt,
      subtitleDecoder: SubtitleDecoder.utf8,
    );
    _vlcPlayerController.addListener(() {
      setState(() {
        _sliderValue = _vlcPlayerController.value.position.inSeconds.toDouble();
      });
    });
  }

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

  void _togglePlayPause() {
    setState(() {
      if (_isPlaying) {
        _vlcPlayerController.pause();
      } else {
        _vlcPlayerController.play();
      }
      _isPlaying = !_isPlaying;
    });
  }

  void _increaseSubtitleDelay() {
    _subtitleController.addSubtitleDelay(0.1);
  }

  void _decreaseSubtitleDelay() {
    _subtitleController.removeSubtitleDelay(0.1);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.amber,
        title: Text('Subtitles for VLC'),
      ),
      body: ValueListenableBuilder(
          valueListenable: _vlcPlayerController,
          builder: (context, value, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Stack(
                  alignment: Alignment.bottomCenter,
                  children: [
                    VlcPlayer(
                      controller: _vlcPlayerController,
                      aspectRatio: 16 / 9,
                      placeholder: const Center(child: CircularProgressIndicator()),
                    ),
                    SizedBox(
                      height: 80,
                      child: SubtitleWrapper(
                        videoPlayerController: _vlcPlayerController,
                        universalSubtitleController: _subtitleController,
                        styleKey: 1,
                        subtitleStyle: const SubtitleStyle(
                          fontSize: 16,
                          textColor: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('Position ${_vlcPlayerController.value.position}'),
                    SizedBox(width: 10),
                    Text('Duration ${_vlcPlayerController.value.duration.toString()}'),
                  ],
                ),
                Text('Delay ${_subtitleController.subtitleDelay.toStringAsFixed(1)}'),
                Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      overlayShape: SliderComponentShape.noThumb,
                      valueIndicatorColor: Colors.red,
                      activeTrackColor: Colors.grey,
                      inactiveTrackColor: Colors.grey.shade200,
                      thumbColor: Colors.amber,
                      trackHeight: 4.0,
                      thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10.0),
                    ),
                    child: Slider(
                      min: 0.0,
                      max: _vlcPlayerController.value.duration.inSeconds.toDouble(),
                      value: _sliderValue,
                      secondaryTrackValue: _vlcPlayerController.value.bufferPercent.toDouble(),
                      onChanged: (value) {
                        setState(() {
                          _sliderValue = value;
                        });
                      },
                      onChangeEnd: (value) {
                        final position = Duration(seconds: value.toInt());
                        _vlcPlayerController.setTime(position.inMilliseconds);
                      },
                    ),
                  ),
                ),
                FloatingActionButton(
                  backgroundColor: Colors.amber,
                  onPressed: _increaseSubtitleDelay,
                  tooltip: 'Increase Subtitle Delay',
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 10),
                FloatingActionButton(
                  backgroundColor: Colors.amber,
                  onPressed: _decreaseSubtitleDelay,
                  tooltip: 'Decrease Subtitle Delay',
                  child: Icon(Icons.remove),
                ),
                SizedBox(height: 10),
                FloatingActionButton(
                  backgroundColor: Colors.amber,
                  onPressed: _togglePlayPause,
                  tooltip: _isPlaying ? 'Pause' : 'Play',
                  child: Icon(_isPlaying ? Icons.pause : Icons.play_arrow),
                ),
              ],
            );
          }),
    );
  }
}

更多关于Flutter字幕包装插件subtitle_wrapper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter字幕包装插件subtitle_wrapper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


subtitle_wrapper 是一个 Flutter 插件，用于在视频播放时显示字幕。它可以帮助你轻松地将字幕文件（如 .srt 或 .vtt 格式）与视频同步显示。以下是如何使用 subtitle_wrapper 插件的基本步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 subtitle_wrapper 依赖：

dependencies:
  flutter:
    sdk: flutter
  subtitle_wrapper: ^0.1.0  # 请查看最新版本

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

2. 导入包

在需要使用字幕的 Dart 文件中导入 subtitle_wrapper：

import 'package:subtitle_wrapper/subtitle_wrapper.dart';

3. 使用 SubtitleWrapper

SubtitleWrapper 是一个可以与视频播放器一起使用的 Widget。它需要以下几个主要参数：

  • videoPlayerController: 视频播放器的控制器（如 VideoPlayerController）。
  • subtitleController: 字幕控制器，用于管理字幕的加载和显示。
  • subtitleStyle: 字幕的样式，如字体大小、颜色等。

4. 示例代码

以下是一个简单的示例，展示如何在 video_player 插件的基础上使用 subtitle_wrapper：

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:subtitle_wrapper/subtitle_wrapper.dart';

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

class _VideoWithSubtitlesState extends State<VideoWithSubtitles> {
  VideoPlayerController _videoPlayerController;
  SubtitleController _subtitleController;

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

    // 初始化视频播放器控制器
    _videoPlayerController = VideoPlayerController.network(
      'https://www.example.com/your_video.mp4',
    )..initialize().then((_) {
        setState(() {});
        _videoPlayerController.play();
      });

    // 初始化字幕控制器
    _subtitleController = SubtitleController(
      subtitleUrl: 'https://www.example.com/your_subtitles.srt',
      subtitleDecoder: SubtitleDecoder.utf8,
    );
  }

  [@override](/user/override)
  void dispose() {
    _videoPlayerController.dispose();
    _subtitleController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video with Subtitles'),
      ),
      body: Center(
        child: _videoPlayerController.value.isInitialized
            ? SubtitleWrapper(
                videoPlayerController: _videoPlayerController,
                subtitleController: _subtitleController,
                subtitleStyle: SubtitleStyle(
                  textStyle: TextStyle(
                    fontSize: 16.0,
                    color: Colors.white,
                  ),
                  padding: EdgeInsets.all(8.0),
                ),
                child: AspectRatio(
                  aspectRatio: _videoPlayerController.value.aspectRatio,
                  child: VideoPlayer(_videoPlayerController),
                ),
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}
回到顶部