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

简介

cached_chewie_plus 是官方 chewie 插件的一个分支，捆绑了 flutter_cached_video_player_plus。它提供了一个功能强大的视频播放器，支持缓存、字幕、自定义选项等功能。

安装

在您的 Flutter 项目的 pubspec.yaml 文件中添加 cached_chewie_plus 依赖：

dependencies:
  cached_chewie_plus: <latest_version>

请确保将 <latest_version> 替换为最新版本号。

使用方法

基本用法

首先，您需要导入 cached_chewie_plus 包，并创建一个 CachedVideoPlayerController 来控制视频播放：

extension UriString on String {
  Uri get toUri => Uri.parse(this);
}

import 'package:cached_chewie_plus/cached_chewie_plus.dart';

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

await videoPlayerController.initialize();

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

final playerWidget = Chewie(
  controller: chewieController,
);

资源释放

为了防止内存泄漏，请确保在不再使用控制器时释放它们。可以通过重写 StatefulWidget 的 dispose 方法来实现：

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

配置选项

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',
    ),
  ];
},

自定义选项弹出窗口

如果您不喜欢默认的 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!(),
          ),
        ),
      );
    },
  );
},

国际化

为了支持多语言，您可以添加翻译字符串：

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

字幕支持

从 1.1.0 版本开始，chewie 支持字幕。以下是如何使用字幕的示例：

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),
    ),
  ),
);

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用程序中使用 cached_chewie_plus：

import 'package:flutter/material.dart';
import 'package:cached_chewie_plus/cached_chewie_plus.dart';
import 'dart:core';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Video Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Video Player Demo'),
    );
  }
}

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final CachedVideoPlayerController _videoPlayerController;
  late final ChewieController _chewieController;

  @override
  void initState() {
    super.initState();

    _videoPlayerController = CachedVideoPlayerController.networkUrl(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'.toUri);

    _videoPlayerController.initialize().then((_) {
      setState(() {});
    });

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

  @override
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _videoPlayerController.value.isInitialized
            ? Chewie(
                controller: _chewieController,
              )
            : const CircularProgressIndicator(),
      ),
    );
  }
}

iOS 注意事项

video_player 插件在 iOS 模拟器上仅在 Flutter 1.26.0 及以上版本中工作。如果遇到问题，您可以切换到 beta 渠道：

flutter channel beta