Flutter视频播放插件chewie的使用

简介

chewie 是一个基于 video_player 插件的高级封装，提供了友好的 Material 或 Cupertino 风格的用户界面。它简化了在 Flutter 应用中添加和控制视频播放的过程。

目录

1. 重要提示
2. Flutter版本兼容性
3. 预览
4. 安装
5. 使用方法
6. 选项
7. 字幕
8. 示例
9. 从Chewie < 0.9.0迁移

重要提示

请注意，chewie 不负责处理由 video_player 引起的问题。如果您遇到与视频播放相关的异常（如 PlatformException），请向 Flutter团队 提交问题。

Flutter版本兼容性

chewie 至少会支持最新的两个版本的 Flutter。这意味着它将至少支持当前最新版本以及前一个版本。

预览

以下是 chewie 的不同UI样式预览：

MaterialControls	MaterialDesktopControls

CupertinoControls

安装

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

dependencies:
  chewie: ^latest_version
  video_player: ^latest_version

使用方法

以下是一个简单的使用示例：

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

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

class ChewieDemo extends StatefulWidget {
  const ChewieDemo({Key? key}) : super(key: key);

  @override
  State<ChewieDemo> createState() => _ChewieDemoState();
}

class _ChewieDemoState extends State<ChewieDemo> {
  late VideoPlayerController _videoPlayerController;
  late ChewieController _chewieController;

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

  Future<void> initializePlayer() async {
    _videoPlayerController = VideoPlayerController.networkUrl(
      Uri.parse('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'),
    );

    await _videoPlayerController.initialize();

    _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: "What's up? :)",
        ),
      ]),
      showSubtitles: true,
      subtitleBuilder: (context, subtitle) => Container(
        padding: const EdgeInsets.all(10.0),
        child: Text(
          subtitle,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    );

    setState(() {});
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chewie Demo',
      theme: ThemeData.light().copyWith(
        colorScheme: ColorScheme.fromSwatch().copyWith(
          secondary: Colors.red,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Chewie Demo'),
        ),
        body: Center(
          child: _chewieController != null && _chewieController.videoPlayerController.value.isInitialized
              ? Chewie(controller: _chewieController)
              : Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    CircularProgressIndicator(),
                    SizedBox(height: 20),
                    Text('Loading...'),
                  ],
                ),
        ),
      ),
    );
  }
}

选项

chewie 提供了一些选项来控制视频播放行为，例如自动播放、循环播放等。您还可以自定义选项菜单中的项目和样式。

字幕

自版本1.1.0起，chewie 支持字幕功能。您可以添加 List<Subtitle> 到 ChewieController 中，并通过 subtitleBuilder 自定义字幕的显示方式。

示例

完整的示例代码可以在 chewie/example 文件夹中找到。运行该示例以了解如何使用 chewie。

从Chewie < 0.9.0迁移

如果您正在从旧版本迁移到新版本，请注意API的变化。现在需要将 VideoPlayerController 和其他配置传递给 ChewieController，然后再将其传递给 Chewie 小部件。

希望这些信息对您有所帮助！如果有任何问题或需要进一步的帮助，请随时提问。