Flutter播放界面UI插件bjy_playbackui_flutter的使用

1. 初始化SDK

在合适的时机初始化SDK，建议在用户勾选完隐私政策之后，避免合规风险。确保进入点播回放之前调用即可。

BJYPlaybackUIFlutterPlatform.instance.initSDK("e33180987");

2. 回放

普通回放

BJYPlaybackUIFlutterPlatform.instance.startPlayback("roomID", "roomToken", {  
      // 用户唯一标识  
      "userId": "853145204",
      // 用户昵称  
      "userName": "yongjiaming",
      // 是否支持循环播放  
      "supportLooping": true, 
      // 是否支持记忆播放，即下次播放从上次关闭的时间点续播       
      "supportBreakPointPlay": true 
});

长期课回放

长期课回放，map中必须要传 session_id

BJYPlaybackUIFlutterPlatform.instance.startPlayback("roomID", "roomToken", {
      // 长期课必须要传 session_id 
      "session_id": "20240101",
      "clipedVersion": "1",
      // 用户唯一标识  
      "userId": "853145204",
      // 用户昵称  
      "userName": "yongjiaming",
      // 是否支持循环播放  
      "supportLooping": true, 
      // 是否支持记忆播放，即下次播放从上次关闭的时间点续播       
      "supportBreakPointPlay": true,
      // 默认是否横屏播放        
      "isLandscape": true    });

裁剪回放

裁剪回放，map中必须要传 clipedVersion

BJYPlaybackUIFlutterPlatform.instance.startPlayback("roomID", "roomToken", {
      // 长期课必须要传 session_id 
      "session_id": "20240101",
      "clipedVersion": "1",
      // 用户唯一标识  
      "userId": "853145204",
      // 用户昵称  
      "userName": "yongjiaming",
      // 是否支持循环播放  
      "supportLooping": true, 
      // 是否支持记忆播放，即下次播放从上次关闭的时间点续播       
      "supportBreakPointPlay": true,
      // 默认是否横屏播放        
      "isLandscape": true    });

3. 点播（跳转原生播放页面）

BJYPlaybackUIFlutterPlatform.instance.startVideo("videoId", "token", {  
      // 用户唯一标识  
      "userId": "853145204",
      // 用户昵称  
      "userName": "yongjiaming",
      // 是否支持循环播放  
      "supportLooping": true, 
      // 是否支持记忆播放，即下次播放从上次关闭的时间点续播       
      "supportBreakPointPlay": true,
      // 默认是否横屏播放        
      "isLandscape": true    });

4. 内嵌播放器

内嵌播放器视图，能方便嵌入到Flutter进行页面自定义开发。

4.1 在线播放

在线播放，token必须传，isLandscape表示当前播放器是否处于横屏状态，用于更新全屏图标状态。

var playerWidget = buildNativeView("e33180987", "160491264",
  "Vaac3j5n5hdjXPso7IvWENxo6c4wA6poVNb7GL8FoVwnHPIguunSCjG5JtrxIFp-", false);

4.2 离线播放

离线播放，token传空字符串，isOffline传true。同时需要保证下载状态是Finish。

var playerWidget = buildNativeView("e33180987", "189522041",
        "", false, isOffline: true);

播放器默认为fit模式，保证画面完整显示，但可能会有黑边。

可在buildNativeView里通过creationParams.putIfAbsent("aspectRatio", () => 1)动态配置。

`buildNativeView`的实现

Widget buildNativeView(String domain, String vid, String token, bool isLandscape, {bool isOffline = false}) {
    // This is used in the platform side to register the view.
    const String viewType = 'flutter_bjy_player_view';
    // Pass parameters to the platform side.
    final Map<String, dynamic> creationParams = {};
    creationParams.putIfAbsent("customDomain", () => domain);
    creationParams.putIfAbsent(
        "playerConfig",
        () => {
              // 用户唯一标识
              "userId": "853145204",
              // 用户昵称
              "userName": "yongjiaming",
              // 是否支持循环播放
              "supportLooping": false,
              // 是否支持记忆播放，即下次播放从上次关闭的时间点续播
              "supportBreakPointPlay": true,
              "supportBackgroundAudio": false,
              // 通知 VideoView 当前是否是横屏，涉及到全屏按钮样式
              "isLandscape": isLandscape
            });
    creationParams.putIfAbsent("vid", () => vid);
    creationParams.putIfAbsent("token", () => token);
    creationParams.putIfAbsent("isOffline", () => isOffline);
    // 设置视频view 的裁剪方式，0 fill，1 fit，默认 fit
    // creationParams.putIfAbsent("aspectRatio", () => 1);

    if (Platform.isIOS) {
      return UiKitView(
        viewType: viewType,
        onPlatformViewCreated: (viewId) {
          MethodChannel methodChannel =
              MethodChannel('com.baijiayun.flutter.NativePlayerView_$viewId');
          nativeMessageListener(methodChannel);
          platforms.add(methodChannel);
        },
        layoutDirection: TextDirection.ltr,
        creationParams: creationParams,
        creationParamsCodec: const StandardMessageCodec(),
      );
    }
    return AndroidView(
      viewType: viewType,
      onPlatformViewCreated: (viewId) {
        print('viewId:$viewId');
        MethodChannel methodChannel =
            MethodChannel('com.baijiayun.flutter.NativePlayerView_$viewId');
        nativeMessageListener(methodChannel);
        platforms.add(methodChannel);
      },
      layoutDirection: TextDirection.ltr,
      creationParams: creationParams,
      creationParamsCodec: const StandardMessageCodec(),
    );
  }

4.3 状态回调

methodChannel监听播放器状态回调

switch (methodCall.method) {
        // 点击播放器的全屏按钮
        case "onToggleScreen":
          if (methodCall.arguments == true) {
            SystemChrome.setPreferredOrientations([
              DeviceOrientation.landscapeLeft,
              DeviceOrientation.landscapeRight,
            ]);
          } else {
            SystemChrome.setPreferredOrientations([
              DeviceOrientation.portraitUp,
              DeviceOrientation.portraitDown,
            ]);
          }
          break;
        // 播放器状态回调
        case "onPlayerStatus":
          /**
           * 出错
            STATE_ERROR,
            未初始化
            STATE_IDLE,
            初始化
            STATE_INITIALIZED,
            数据已准备好，待播放
            STATE_PREPARED,
            播放中
            STATE_STARTED,
            暂停状态
            STATE_PAUSED,
            终止状态(已释放播放器实例)
            STATE_STOPPED,
            播放结束
            STATE_PLAYBACK_COMPLETED
         */
          print("onPlayerStatus ${methodCall.arguments}");
          break;
        // 播放器播放进度回调
        case "onPlayingTime":
          print("onPlayingTime ${methodCall.arguments}");
          break;
        // 播放器出错回调
        case "onError":
          print("onError ${methodCall.arguments}");
          break;
        default:
          break;
      }

5. 下载

获取下载记录，返回对象为JsonArray，每个JsonObject对应一条下载记录。

// 获取下载记录
BJYPlaybackUIFlutterPlatform.instance.getAllDownloadInfo()  

// 下载点播视频  
BJYPlaybackUIFlutterPlatform.instance.downloadVideo("videoID", "videoToken",
        (downloadedLength, totalLength) {
      print("progress: $downloadedLength/$totalLength");
    }, (stateCode, message) {
      print("state: $stateCode");
    });

// 下载回放视频  
BJYPlaybackUIFlutterPlatform.instance
        .downloadPlayback("playbackClassID", "playbacksSessionID", "playbacksToken",
            (downloadedLength, totalLength) {
      print("progress: $downloadedLength/$totalLength");
    }, (stateCode, message) {
      print("state: $stateCode");
    });

// 开始下载  
BJYPlaybackUIFlutterPlatform.instance.startDownloadWithVideoID("videoID");  
BJYPlaybackUIFlutterPlatform.instance.startDownloadWithRoomIDAndSessionID("roomID", "sessionID");  

// 暂停下载  
BJYPlaybackUIFlutterPlatform.instance.pauseDownloadWithVideoID("videoID");  
BJYPlaybackUIFlutterPlatform.instance.pauseDownloadWithRoomIDAndSessionID("roomID", "sessionID");  

// 取消并删除下载文件  
BJYPlaybackUIFlutterPlatform.instance.cancelDownloadWithVideoID("videoID");  
BJYPlaybackUIFlutterPlatform.instance.cancelDownloadWithRoomIDAndSessionID("roomID", "sessionID");

6. 离线点播回放

请确保videoId/RoomId有对应的下载记录，否则无法正常调起播放页面。

// 播本地点播  
BJYPlaybackUIFlutterPlatform.instance.startLocalVideo("videoID", {});  

// 播本地回放  
BJYPlaybackUIFlutterPlatform.instance.startLocalPlayback("roomID", "sessionID", {});

7. 监听播放器状态（非内嵌集成方式）

内嵌播放器集成下请使用 4.3节的回调，直接跳转到原生播放页面使用本节的监听方式。

BJYPlaybackUIFlutterPlatform.instance.setPlayerListener(MyPlayerListener());

MyPlayerListener如下：

class MyPlayerListener implements PlayerListener {
  [@override](/user/override)
  void onPlayerStatus(String playerStatus) {
    // 处理播放器状态变化
    print("MyPlayerListener onPlayerStatus playerStatus=${playerStatus}");
  }

  [@override](/user/override)
  void onError(int code, String errorDescription) {
    // 处理播放器错误
    print("MyPlayerListener onError code=${code}, errorDescription=${errorDescription}");
  }

  [@override](/user/override)
  void onPlayingTime(int currentTime, int totalTime) {
    // 处理播放器时间变化
    print("MyPlayerListener onPlayingTime currentTime=${currentTime}, totalTime=${totalTime}");
  }
}

更多关于Flutter播放界面UI插件bjy_playbackui_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 1楼

更多关于Flutter播放界面UI插件bjy_playbackui_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

bjy_playbackui_flutter 是一个用于 Flutter 的播放界面 UI 插件，通常用于构建视频或音频播放器的界面。以下是如何使用该插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 bjy_playbackui_flutter 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  bjy_playbackui_flutter: ^版本号  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:bjy_playbackui_flutter/bjy_playbackui_flutter.dart';

3. 使用播放器 UI 组件

bjy_playbackui_flutter 插件通常会提供一个现成的播放器 UI 组件，你可以直接在你的应用中使用它。以下是一个简单的示例：

class MyPlaybackScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('播放界面'),
      ),
      body: BJYPlaybackUI(
        videoUrl: 'https://your-video-url.com/video.mp4',
        onPlay: () {
          print('播放开始');
        },
        onPause: () {
          print('播放暂停');
        },
        onEnd: () {
          print('播放结束');
        },
      ),
    );
  }
}

4. 配置播放器参数

BJYPlaybackUI 组件通常支持多种配置选项，例如：

videoUrl: 视频的 URL。
autoPlay: 是否自动播放。
loop: 是否循环播放。
controls: 是否显示控制条。
onPlay: 播放开始时的回调。
onPause: 播放暂停时的回调。
onEnd: 播放结束时的回调。

你可以根据需要进行配置。

5. 运行应用

完成上述步骤后，你可以运行你的 Flutter 应用，并查看播放器 UI 的效果。

6. 处理错误和异常

在实际使用中，可能会遇到网络问题、视频格式不支持等问题。你可以在 BJYPlaybackUI 组件中添加错误处理逻辑，例如：

BJYPlaybackUI(
  videoUrl: 'https://your-video-url.com/video.mp4',
  onError: (error) {
    print('播放错误: $error');
  },
)

7. 自定义 UI

如果默认的 UI 不满足你的需求，你可以通过自定义 BJYPlaybackUI 的样式或使用插件提供的其他组件来构建你自己的播放界面。

8. 插件文档和社区支持

确保查阅插件的官方文档以获取更多详细信息和高级用法。如果遇到问题，可以在 Flutter 社区或插件的 GitHub 仓库中寻求帮助。

示例代码

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:bjy_playbackui_flutter/bjy_playbackui_flutter.dart';

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

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

class MyPlaybackScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('播放界面'),
      ),
      body: BJYPlaybackUI(
        videoUrl: 'https://your-video-url.com/video.mp4',
        autoPlay: true,
        loop: false,
        controls: true,
        onPlay: () {
          print('播放开始');
        },
        onPause: () {
          print('播放暂停');
        },
        onEnd: () {
          print('播放结束');
        },
        onError: (error) {
          print('播放错误: $error');
        },
      ),
    );
  }
}

Flutter播放界面UI插件bjy_playbackui_flutter的使用

Flutter播放界面UI插件bjy_playbackui_flutter的使用

1. 初始化SDK

2. 回放

普通回放

长期课回放

裁剪回放

3. 点播（跳转原生播放页面）

4. 内嵌播放器

4.1 在线播放

4.2 离线播放

buildNativeView的实现

4.3 状态回调

5. 下载

6. 离线点播回放

7. 监听播放器状态 （非内嵌集成方式）

1. 添加依赖

2. 导入插件

3. 使用播放器 UI 组件

4. 配置播放器参数

5. 运行应用

6. 处理错误和异常

7. 自定义 UI

8. 插件文档和社区支持

示例代码

`buildNativeView`的实现

7. 监听播放器状态（非内嵌集成方式）