Flutter视频播放插件iqplayer的使用

Flutter视频播放插件iqplayer的使用

IQPlayer

简单带有字幕的视频播放器，为Flutter编写。

这个包是我送给我的老师和领导 Mr. Muqtada Al-Sadr 的礼物。

基于 BLoC 高兴地构建。

特性

1. ✅ 可以从Assets、文件、网络播放视频（通过 VideoPlayerController）
2. ✅ 解析来自Assets、文件、网络的字幕（通过 SubtitleProvider 类）
3. ✅ 使用 IQTheme 类自定义主题
4. ✅ 支持字幕：
   • ✅ VTT格式
   • ❌ SRT格式
   • ❌ 用户自定义格式
5. ✅ IQScreen: 一个包含视频播放器的屏幕框架
6. ❌ IQPlayer: 一个使您可以在屏幕上观看视频的widget（目前在开发中）
7. ✅ IQParser: 一个包含字幕视图的字幕包，包括widget和解析器
8. ✅ IQTheme: 用于对播放器UI进行定制，使其与您的应用程序更兼容

安装

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  iqplayer: <最新版本>

然后从命令行安装包：

flutter pub get

2. 配置权限

Android

确保在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

iOS

警告：视频播放器在iOS模拟器上不可用。必须在真实设备上进行开发和测试。

在 Info.plist 文件中添加以下条目：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

这将允许您的应用通过URL访问视频文件。

3. 导入

在Dart文件中导入：

import "package:iqplayer/iqplayer.dart";

组件

1. IQScreen:

IQScreen(
  videoPlayerController: VideoPlayerController.network(""),
  subtitleProvider: SubtitleProvider.fromNetwork(""),
  title: "Simple Video",
  description: "Simple Description",
);

1. IQPlayer:

目前在开发中。

1. IQParser:

注意：它会自动与 IQScreen 一起使用，您可以使用 SubtitleProvider 显示数据。

BlocProvider<SubtitleBloc>(
  create: (context) =>
    SubtitleBloc(
      SubtitleProvider.fromNetwork(""),
    )..add(FetchSubtitles()),
  child: MyParser(),
);

注意：您可以排除 MyParser 并删除它！

注意：为什么创建 MyParser？参见这里

1. IQTheme:

注意：您可以使用此类对 IQScreen、IQPlayer 或 IQParser 进行主题定制。

您有+17种选项来定制主题！

IQScreen(
    ...
    iqTheme: IQTheme(
      ...
    ),
 );

使用

1. 使用 IQScreen 与 Navigator：

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (BuildContext context) => IQScreen(
      title: "",
      description: "",
      videoPlayerController: VideoPlayerController.network(""),
      subtitleProvider: SubtitleProvider.fromNetwork(""),
    ),
  ),
);

1. 使用 IQParser：

您必须使用 BlocProvider 和 SubtitleProvider 来配置字幕。

// 在您的widget中
BlocProvider<SubtitleBloc>(
  create: (context) =>
    SubtitleBloc(
      SubtitleProvider.fromNetwork(""),
    )..add(FetchSubtitles()),
  child: MyParser(),
);

// 新的parser类，您可以排除 `MyParser`
class MyParser extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return IQParser();
  }
}

注意：您可以排除 MyParser 并删除它！

注意：为什么创建 MyParser？参见这里

1. 您可以使用 IQTheme 自定义UI，例如：

您有+17种选项来定制主题！

IQTheme(
    loadingProgress: SpinKitCircle(
      color: Colors.red,
    ),
    playButtonColor: Colors.transparent,
    videoPlayedColor: Colors.indigo,
    playButton: (bool isPlay) {
      if (isPlay)
        return Icon(
          Icons.pause_circle_filled,
          color: Colors.red,
          size: 50,
        );
      return Icon(
        Icons.play_circle_outline,
        color: Colors.red,
        size: 50,
      );
    },
);

示例

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:iqplayer/iqplayer.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IQPlayer Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'IQPlayer Demo'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open IQPlayer'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (BuildContext context) => IQScreen(
                  title: title,
                  description: 'Simple video as a demo video',
                  videoPlayerController: VideoPlayerController.network(
                    'https://d11b76aq44vj33.cloudfront.net/media/720/video/5def7824adbbc.mp4',
                  ),
                  subtitleProvider: SubtitleProvider.fromNetwork(
                      'https://duoidi6ujfbv.cloudfront.net/media/0/subtitles/5675420c9d9a3.vtt'),
                  iqTheme: IQTheme(
                    loadingProgress: SpinKitCircle(
                      color: Colors.red,
                    ),
                    playButtonColor: Colors.transparent,
                    videoPlayedColor: Colors.indigo,
                    playButton: (bool isPlay) {
                      if (isPlay)
                        return Icon(
                          Icons.pause_circle_filled,
                          color: Colors.red,
                          size: 50,
                        );
                      return Icon(
                        Icons.play_circle_outline,
                        color: Colors.red,
                        size: 50,
                      );
                    },
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}