Flutter视频播放插件klipt_video_player的使用

klipt_video_player 是一个为 Flutter 设计的视频播放器，支持多种手势操作，并且集成了弹幕功能。

描述

每个人都喜欢 chewie，这是一个高度可定制界面的视频播放器。在观看视频时，许多人希望看到或发送弹幕（也称为子弹或飞弹）。klipt_video_player 使这一切成为可能，同时集成手势控制以增强用户体验。

弹幕功能特点

• 可以选择发送弹幕的颜色；
• 可以选择弹幕的位置：顶部滚动或底部固定；
• 调整弹幕在视频播放器上的显示区域；
• 调整弹幕的流动速度；
• 调整弹幕的字体大小；

手势支持

• 长按视频可以双倍速播放；
• 双击视频可以播放/暂停视频；
• 左右滑动快速定位到视频中的某个位置；
• 在屏幕左半部分上下滑动调整视频亮度（基于系统亮度）；
• 在屏幕右半部分上下滑动调整视频音量（基于系统音量）；
• 还有一个锁定按钮来阻止所有手势操作！

预览

底部栏按钮：1. 播放/暂停；2. 开启/关闭弹幕；3. 弹幕设置；4. 打开键盘发送弹幕；5. 调整视频播放速度；6. 展开/折叠

安装

在你的 Flutter 项目中的 pubspec.yaml 文件内添加 klipt_video_player 依赖：

dependencies:
  klipt_video_player: <最新版本>

使用播放器

在 pubspec.yaml 文件中添加了依赖之后，可以通过简单的调用 Widget 来访问播放器（还有一些额外的参数可以探索）：

重要提示: 请注意，你必须调用 createWithDependencies，因为一些 GetX 控制器需要通过这个 Widget 创建才能使其正常工作。

import 'package:klipt_video_player/klipt_video_player.dart';

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      /// 必须使用 createWithDependencies
      child: KliptVideoView.createWithDependencies(
        "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4",
        autoPlay: true,
        looping: true,
        aspectRatio: 16 / 9,
        rightButtonList: null,
        videoTitle: "A butterfly demo",
        danmakuList: list,
        primaryColor: Colors.pinkAccent,
      ),
    ),
  );
}

弹幕列表示例

弹幕列表示例如下：它是一个包含 [DanmakuData] 的列表，其中的 [content], [time] 和 [position] 是必需字段。其他可选参数和解释可以在 [danmanku.dart] 文件中找到。

final List<DanmakuData> list = [
  DanmakuData(content: "a initial danmaku", time: 2000, position: 1),
  DanmakuData(content: "a fantastic danmaku", time: 2500, position: 1),
  DanmakuData(content: "a working danmaku", time: 3000, position: 1),
  DanmakuData(content: "a bottom danmaku", time: 3500, position: 2)
];

示例代码

以下是一个完整的示例代码，展示了如何使用 klipt_video_player 插件：

import 'package:klipt_video_player/klipt_video_player.dart';
import 'package:klipt_video_player/custom_chewie/src/klipt_video_player.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  final String? title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<DanmakuData> list = [
    DanmakuData(content: "a initial danmaku", time: 2000, position: 1),
    DanmakuData(content: "a fantastic danmaku", time: 2500, position: 1),
    DanmakuData(content: "a working danmaku", time: 3000, position: 1),
    DanmakuData(content: "a bottom danmaku", time: 3500, position: 2)
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        /// 必须使用 createWithDependencies
        child: KliptVideoView.createWithDependencies(
          "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4",
          autoPlay: true,
          looping: true,
          aspectRatio: 16 / 9,
          rightButtonList: null,
          videoTitle: "A butterfly demo",
          danmakuList: list,
          primaryColor: Colors.pinkAccent,
        ),
      ),
    );
  }
}