Flutter视频播放器插件chewiebingeplayer的使用

chewie

The video player for Flutter with a heart of gold.

The video_player 插件提供了低级别的视频播放访问。Chewie 在底层使用 video_player 并用友好的 Material 或 Cupertino UI 包装它！

Preview

MaterialControls	MaterialDesktopControls

CupertinoControls

Installation

在你的 Flutter 项目中的 pubspec.yaml 文件下添加 chewie 和 video_player 作为依赖项：

dependencies:
  chewie: <latest_version>
  video_player: <latest_version>

Using it

import 'package:chewiebingeplayer/chewie.dart';

// 初始化视频播放控制器
final videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(
    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'));

await videoPlayerController.initialize();

// 初始化 chewie 控制器
final chewieController = ChewieController(
  videoPlayerController: videoPlayerController,
  autoPlay: true,
  looping: true,
);

// 创建 chewie 视频播放组件
final playerWidget = Chewie(
  controller: chewieController,
);

请确保在使用后释放两个控制器。例如，在 StatefulWidget 的 dispose 方法中覆盖它们：

@override
void dispose() {
  videoPlayerController.dispose();
  chewieController.dispose();
  super.dispose();
}

Options

Chewie 提供了一些用于控制视频的选项。这些选项默认情况下会出现在一个 showModalBottomSheet 中（类似于 YouTube）。默认情况下，Chewie 将 播放速度 和 字幕 选项作为 OptionItem 传递。

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

additionalOptions: (context) {
  return <OptionItem>[
    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',
    ),
  ];
},

Customizing the modal sheet

如果你不喜欢默认的 showModalBottomSheet 来显示选项，你可以通过 optionsBuilder 方法覆盖视图：

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!(),
          ),
        ),
      );
    },
  );
},

你的 additionalOptions 已经包含在这里（如果你提供了 additionalOptions）！

Translations

没有适当的翻译，一个选项有什么意义？

要添加你的翻译字符串，请添加以下代码：

optionsTranslation: OptionsTranslation(
  playbackSpeedButtonText: 'Wiedergabegeschwindigkeit',
  subtitlesButtonText: 'Untertitel',
  cancelButtonText: 'Abbrechen',
),

Subtitles

自从版本 1.1.0 起，chewie 支持字幕。这里是如何使用它们的方法。

你可以提供一个 List<Subtitle> 并使用 subtitleBuilder 函数自定义字幕。

向你的 ChewieController 添加字幕如下所示：

ChewieController(
  videoPlayerController: _videoPlayerController,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles([
    Subtitle(
      index: 0,
      start: Duration.zero,
      end: const Duration(seconds: 10),
      text: 'Hello from subtitles',
    ),
    Subtitle(
      index: 1,
      start: const Duration(seconds: 10),
      end: const Duration(seconds: 20),
      text: 'Whats up? :)',
    ),
  ]),
  subtitleBuilder: (context, subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: Text(
      subtitle,
      style: const TextStyle(color: Colors.white),
    ),
  ),
);

index 属性是为了如果你希望将字幕结构化并在此处提供索引。end 和 text 是关键属性。

Duration 定义了字幕在视频中的开始和结束时间。例如，如果你的视频长 10 分钟，并且你想在第 0 秒到第 10 秒之间添加字幕：

Subtitle(
  index: 0,
  start: Duration.zero,
  end: const Duration(seconds: 10),
  text: 'Hello from subtitles',
),

Example

请在 example/ 文件夹中运行应用来开始播放！

Migrating from Chewie < 0.9.0

与以前相比，现在你不再将 VideoPlayerController 和你的选项直接传递给 Chewie 组件，而是先将其传递给 ChewieController，然后将该控制器传递给 Chewie 组件。

final playerWidget = Chewie(
  videoPlayerController,
  autoPlay: true,
  looping: true,
);

变为

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

final playerWidget = Chewie(
  controller: chewieController,
);

Roadmap

• ✅ Material UI
• ✅ Material Desktop UI
• ✅ Cupertino UI
• ✅ 带有翻译的选项
• ✅ 字幕
• ✅ 自定义控件
• ✅ 根据源宽高比自动旋转全屏
• ✅ 直播流和 UI
• ✅ 自动播放
• ✅ 占位符
• ✅ 循环播放
• ✅ 从指定时间开始播放
• ✅ 自定义进度条颜色
• ✅ 自定义叠加层
• ✅ 允许睡眠（保持唤醒）
• ✅ 播放速度控制
• ✅ 自定义路由页面构建器
• ✅ 自定义设备方向和系统覆盖
• ✅ 自定义错误构建器
• ❌ 支持不同分辨率的视频
• ❌ 重新设计状态管理器为 Provider
• ❌ 屏幕镜像 / 投放 (Google Chromecast)

iOS warning

video_player 插件在 iOS 模拟器上只能在 flutter 1.26.0 或更高版本中工作。你可能需要切换到 beta 通道 flutter channel beta 请参阅此 issue。

000000000000000KKKKKKKKKKKKXXXXXXXXXXXXXKKKKKKKKKKKKKKKKKKKKKKKKKKK00
000000000000000KKKKKKKKKKKKKXXXXXXXXXXKKKKKKKKKKKKKKKKKKKKKKKKKKKKK00
...

示例代码

import 'package:chewiebingeplayer_example/app/app.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(
    const ChewieDemo(),
  );
}