Flutter Chewie 视频播放器 HarmonyOS 适配使用指南

Luff773

754人浏览 · 2025-12-18 14:57:22

Luff773 · 2025-12-18 14:57:22 发布

插件介绍

fluttertpc_chewie 是一个基于 chewie@1.8.5 开发的 HarmonyOS 适配版本，为 Flutter 开发者提供了在 HarmonyOS 设备上实现高质量视频播放的能力。该插件提供了丰富的视频控制功能，包括播放/暂停、进度控制、音量调节、全屏播放等，同时支持自定义字幕和播放控制界面。

主要功能特性

✅ 视频播放控制（播放、暂停、跳转）
✅ 进度条拖动和时间显示
✅ 音量调节和静音控制
✅ 全屏播放支持
✅ 循环播放设置
✅ 自定义字幕支持（带样式和时间控制）
✅ 多平台控制界面适配（Material、Cupertino、Desktop）
✅ 播放速度调节
✅ 自定义控件布局和样式

如何使用插件

1. 包的引入

由于这是一个自定义修改的 HarmonyOS 适配版本，需要通过 Git 形式引入。在项目的 pubspec.yaml 文件中添加以下配置：

dependencies:
  chewie:
    git:
      url: https://gitcode.com/openharmony-sig/fluttertpc_chewie.git

dev_dependencies:
  chewie_ohos:
    git:
      url: https://gitcode.com/openharmony-sig/fluttertpc_chewie.git
      path: ohos

添加依赖后，执行以下命令获取包：

flutter pub get

2. API 的调用与实现

2.1 基本使用示例

下面是一个在 HarmonyOS 上使用 chewie_ohos 实现视频播放的基本示例：

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

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

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

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

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

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

  Future<void> initializePlayer() async {
    // 初始化视频控制器
    _videoPlayerController = VideoPlayerController.networkUrl(
      Uri.parse('https://media.w3.org/2010/05/sintel/trailer.mp4'),
    );

    await _videoPlayerController.initialize();

    // 创建 Chewie 控制器
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true, // 自动播放
      looping: true,  // 循环播放
    );

    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chewie 视频播放器'),
      ),
      body: Center(
        child: _chewieController != null &&
                _chewieController!.videoPlayerController.value.isInitialized
            ? Chewie(
                controller: _chewieController!, // 使用 Chewie 控制器
              )
            : const Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 20),
                  Text('视频加载中...'),
                ],
              ),
      ),
    );
  }
}

2.2 高级功能使用

自定义字幕

// 创建带样式的字幕
final subtitles = [
  Subtitle(
    index: 0,
    start: Duration.zero,
    end: const Duration(seconds: 10),
    text: const TextSpan(
      children: [
        TextSpan(text: 'Hello', style: TextStyle(color: Colors.red, fontSize: 22)),
        TextSpan(text: ' from ', style: TextStyle(color: Colors.green, fontSize: 20)),
        TextSpan(text: 'subtitles', style: TextStyle(color: Colors.blue, fontSize: 18)),
      ],
    ),
  ),
  Subtitle(
    index: 1,
    start: const Duration(seconds: 10),
    end: const Duration(seconds: 20),
    text: 'Whats up? :)',
  ),
];

// 在 ChewieController 中配置字幕
_chewieController = ChewieController(
  videoPlayerController: _videoPlayerController1,
  autoPlay: true,
  looping: true,
  subtitle: Subtitles(subtitles),
  subtitleBuilder: (context, dynamic subtitle) => Container(
    padding: const EdgeInsets.all(10.0),
    child: subtitle is InlineSpan
        ? RichText(text: subtitle)
        : Text(subtitle.toString(), style: const TextStyle(color: Colors.black)),
  ),
);

全屏控制

// 进入全屏
TextButton(
  onPressed: () {
    _chewieController?.enterFullScreen();
  },
  child: const Text('进入全屏'),
),

// 退出全屏
TextButton(
  onPressed: () {
    _chewieController?.exitFullScreen();
  },
  child: const Text('退出全屏'),
),

切换视频源

List<String> videoSources = [
  "https://media.w3.org/2010/05/sintel/trailer.mp4",
  "http://www.w3school.com.cn/example/html5/mov_bbb.mp4",
  "http://vjs.zencdn.net/v/oceans.mp4"
];

int currentIndex = 0;

Future<void> toggleVideo() async {
  await _videoPlayerController.pause();
  currentIndex = (currentIndex + 1) % videoSources.length;

  _videoPlayerController = VideoPlayerController.networkUrl(
    Uri.parse(videoSources[currentIndex]),
  );

  await _videoPlayerController.initialize();

  _chewieController = _chewieController!.copyWith(
    videoPlayerController: _videoPlayerController,
    autoPlay: true,
    looping: true,
  );

  setState(() {});
}

控制界面样式切换

// 切换为 Android 风格控件
setState(() {
  _platform = TargetPlatform.android;
});

// 切换为 iOS 风格控件
setState(() {
  _platform = TargetPlatform.iOS;
});

// 切换为 Desktop 风格控件
setState(() {
  _platform = TargetPlatform.windows;
});

3. 核心 API 参考

控制器方法

方法名	返回类型	描述	HarmonyOS 支持
`play()`	`Future<void>`	开始播放视频	✅
`pause()`	`Future<void>`	暂停视频播放	✅
`seekTo(Duration moment)`	`Future<void>`	跳转到指定时间	✅
`setVolume(double volume)`	`Future<void>`	设置视频音量	✅
`setLooping(bool looping)`	`Future<void>`	设置是否循环播放	✅
`enterFullScreen()`	`void`	进入全屏模式	✅
`exitFullScreen()`	`void`	退出全屏模式	✅
`setSpeed(double speed)`	`Future<void>`	设置播放速度	✅

控制器属性

属性名	类型	描述	HarmonyOS 支持
`videoPlayerController`	`VideoPlayerController`	视频控制器	✅
`autoPlay`	`bool`	视频加载后自动播放	✅
`looping`	`bool`	是否循环播放	✅
`showControls`	`bool`	是否显示控制界面	✅
`autoInitialize`	`bool`	启动时自动初始化视频	✅
`draggableProgressBar`	`bool`	进度条是否可拖动	✅
`startAt`	`Duration`	从指定位置开始播放	✅
`subtitle`	`Subtitles`	字幕内容	✅
`subtitleBuilder`	`Widget Function(BuildContext, dynamic)`	自定义字幕渲染	✅
`additionalOptions`	`List<OptionItem> Function(BuildContext)`	自定义选项菜单	✅
`zoomAndPan`	`bool`	是否允许缩放和平移	✅
`maxScale`	`double`	最大缩放比例	✅
`showOptions`	`bool`	是否显示选项按钮	✅