Flutter视频控制插件flutter_video_controls的使用

flutter_video_controls 插件为 Flutter 应用提供了强大的视频播放控制功能。该插件基于 video_player 插件，并为其添加了友好的 Material 或 Cupertino UI。

预览

MaterialControls	MaterialDesktopControls

CupertinoControls

安装

在你的 Flutter 项目的 pubspec.yaml 文件中添加 flutter_video_controls 和 video_player 依赖：

dependencies:
  flutter_video_controls: <latest_version>
  video_player: <latest_version>

使用它

首先，初始化 VideoPlayerController 并加载视频：

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

final videoPlayerController = VideoPlayerController.network(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');

await videoPlayerController.initialize();

final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

final playerWidget = FlutterVideoControls(
  controller: chewieController,
);

确保在不再需要时释放控制器：

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

选项

flutter_video_controls 提供了一些控制视频播放的选项，默认情况下这些选项会出现在一个 showModalBottomSheet 中（类似于 YouTube）：

要添加额外的选项，可以在 ChewieController 中添加以下代码：

additionalOptions: (context) {
  return [
    OptionItem(
      onTap: () => debugPrint('My option works!'),
      iconData: Icons.chat,
      title: 'My localized title',
    ),
    OptionItem(
      onTap: () => debugPrint('Another option that works!'),
      iconData: Icons.chat,
      title: 'Another localized title',
    ),
  ];
},

自定义模态表单

如果你不喜欢默认的 showModalBottomSheet，可以自定义视图：

optionsBuilder: (context, defaultOptions) async {
  await showDialog<void>(
    context: context,
    builder: (ctx) {
      return AlertDialog(
        content: ListView.builder(
          itemCount: defaultOptions.length,
          itemBuilder: (_, i) => ActionChip(
            label: Text(defaultOptions[i].title),
            onPressed: () => defaultOptions[i].onTap!(),
          ),
        ),
      );
    },
  );
},

翻译

要添加翻译字符串：

optionsTranslation: OptionsTranslation(
  playbackSpeedButtonText: '播放速度',
  subtitlesButtonText: '字幕',
  cancelButtonText: '取消',
),

字幕

从版本 1.1.0 开始，flutter_video_controls 支持字幕。你可以通过提供 List<Subtitle> 并使用 subtitleBuilder 函数来自定义字幕：

ChewieController(
  videoPlayerController: _videoPlayerController,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles([
    Subtitle(
      index: 0,
      start: Duration.zero,
      end: const Duration(seconds: 10),
      text: '你好，我是字幕',
    ),
    Subtitle(
      index: 1,
      start: const Duration(seconds: 10),
      end: const Duration(seconds: 20),
      text: '你好吗？:)',
    ),
  ]),
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

示例

请运行应用以开始播放：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final videoPlayerController = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Video Controls Example')),
        body: Center(
          child: FutureBuilder(
            future: videoPlayerController.initialize(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return FlutterVideoControls(
                  controller: ChewieController(
                    videoPlayerController: videoPlayerController,
                    autoPlay: true,
                    looping: true,
                  ),
                );
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

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

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