Flutter视频播放插件flutter_aliplayer的使用
Flutter视频播放插件flutter_aliplayer的使用
安装
在 pubspec.yaml 文件中添加依赖项：
dependencies:
flutter_aliplayer: ^6.17.0
说明
Flutter 播放器在原生层是基于 Android 播放器 SDK 和 iOS 播放器 SDK 的。部分原生播放器 SDK 的接口可能遗漏，目前我们已将源码提供出来，开发者可以自行添加。也可以通知给我们，我们会对遗漏的接口进行补充。
版本号规则
从 6.17.0 版本开始，我们将并行发布两种版本，请根据需求选择使用：
- 版本号如 6.17.0：对应 SDK 内核为 播放器独立SDK（AliPlayerSDK），适用于纯点播场景。
- 版本号如 6.17.0-interactivelive：对应 SDK 内核为 音视频终端SDK（AliVCSDK_InteractiveLive），适用于点播和直播场景。若配合推流插件
flutter_livepush_plugin使用，请务必使用此版本，以避免 SDK 编译冲突。
您可以在项目中修改 useAIOFramework 变量以动态切换 SDK 内核：
- 设置
useAIOFramework = false：使用播放器独立 SDK（默认）。 - 设置
useAIOFramework = true：使用音视频终端 SDK。
您还可以根据需要自行更改 SDK 内核版本：
- 设置
player_sdk_version：定义播放器独立 SDK 版本号。 - 设置
aio_sdk_version：定义音视频终端 SDK 版本号。
请根据具体需求进行选择和调整，以确保最佳使用体验。
AliPlayer
1. 播放控制
///1、创建播放器
FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
///多实例播放器创建方式，需要 flutter 层管理 playerId，其他接口一样，在播放器的回调中会返回对应的 playerId 来通知 flutter 层是哪一个播放器对象
//FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer(playerId: playerId);
///2、设置监听,只列举了部分接口，更多接口可以参考播放器 Android\iOS 接口文档
///准备成功
fAliplayer.setOnPrepared((playerId) {});
///首帧显示
fAliplayer.setOnRenderingStart((playerId) {});
///视频宽高变化
fAliplayer.setOnVideoSizeChanged((width, height, playerId) {});
///播放器状态变化
fAliplayer.setOnStateChanged((newState, playerId) {});
///加载状态
fAliplayer.setOnLoadingStatusListener(
loadingBegin: (playerId) {},
loadingProgress: (percent, netSpeed, playerId) {},
loadingEnd: (playerId) {});
///拖动完成
fAliplayer.setOnSeekComplete((playerId) {});
///播放器事件信息回调，包括 buffer、当前播放进度 等等信息，根据 infoCode 来判断，对应 FlutterAvpdef.infoCode
fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {});
///播放完成
fAliplayer.setOnCompletion((playerId) {});
///设置流准备完成
fAliplayer.setOnTrackReady((playerId) {});
///截图结果
fAliplayer.setOnSnapShot((path, playerId) {});
///错误结果
fAliplayer.setOnError((errorCode, errorExtra, errorMsg, playerId) {});
///切换流变化
fAliplayer.setOnTrackChanged((value, playerId) {});
///3、设置渲染的 View
@override
Widget build(BuildContext context) {
var x = 0.0;
var y = 0.0;
Orientation orientation = MediaQuery.of(context).orientation;
var width = MediaQuery.of(context).size.width;
var height;
if (orientation == Orientation.portrait) {
height = width * 9.0 / 16.0;
} else {
height = MediaQuery.of(context).size.height;
}
AliPlayerView aliPlayerView = AliPlayerView(
onCreated: onViewPlayerCreated,
x: x,
y: y,
width: width,
height: height);
return OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
return Scaffold(
body: Column(
children: [
Container(
color: Colors.black,
child: aliPlayerView,
width: width,
height: height),
],
),
);
},
);
}
///4、设置播放源
///说明：STS 播放方式，vid、region、accessKeyId、accessKeySecret、securityToken 为必填，其他参数可选
/// AUTH 播放方式，vid、region、playAuth 为必填，其他参数可选
/// 每个 Map 对应的key 在 flutter 的 Demo 的 config.dart 中查看，fAliplayer 为播放器对象，如果还未创建，参考后续文档创建播放器
void onViewPlayerCreated(viewId) async {
///将 渲染 View 设置给播放器
fAliplayer.setPlayerView(viewId);
//设置播放源
FlutterAliplayer.createVidPlayerConfigGenerator();
// 设置预览时间
FlutterAliplayer.setPreviewTime(
int.parse(_dataSourceMap[DataSourceRelated.PREVIEWTIME_KEY]));
String playConfig = await FlutterAliplayer.generatePlayerConfig();
switch (_playMode) {
case ModeType.URL:
this.fAliplayer.setUrl(_dataSourceMap[DataSourceRelated.URL_KEY]);
break;
case ModeType.STS:
this.fAliplayer.setVidSts(
vid: _dataSourceMap[DataSourceRelated.VID_KEY],
region: _dataSourceMap[DataSourceRelated.REGION_KEY],
accessKeyId: _dataSourceMap[DataSourceRelated.ACCESSKEYID_KEY],
accessKeySecret: _dataSourceMap[DataSourceRelated.ACCESSKEYSECRET_KEY],
securityToken: _dataSourceMap[DataSourceRelated.SECURITYTOKEN_KEY],
definitionList: _dataSourceMap[DataSourceRelated.DEFINITION_LIST],
playConfig: playConfig);
break;
case ModeType.AUTH:
this.fAliplayer.setVidAuth(
vid: _dataSourceMap[DataSourceRelated.VID_KEY],
region: _dataSourceMap[DataSourceRelated.REGION_KEY],
playAuth: _dataSourceMap[DataSourceRelated.PLAYAUTH_KEY],
definitionList: _dataSourceMap[DataSourceRelated.DEFINITION_LIST],
previewTime: _dataSourceMap[DataSourceRelated.PREVIEWTIME_KEY]);
break;
default:
}
}
///可选步骤:开启自动播放，默认关闭
fAliplayer.setAutoPlay(true);
///5、prepare
fAliplayer.prepare();
///说明：如果开启了自动播放，则调用 prepare 后即可，播放器在 prepare 成功后会自动播放，如果未开启自动播放，则需要在 setOnPrepard() 准备成功回调中，调用 fAliplayer.play() 开始播放
//暂停播放
///暂停播放后，恢复播放直接调用 play 即可
fAliplayer.pause();
//停止播放
///停止播放后,恢复播放需要重新走一遍播放流程：prepare --> play
fAliplayer.stop();
//销毁
fAliplayer.release();
//seek
///seekMode 可选值：FlutterAvpdef.ACCURATE(精准seek) 和 FlutterAvpdef.INACCURATE(非精准seek)
fAliplayer.seek(position, seekMode);
//循环播放
fAliplayer.setLoop(true);
//静音、音量控制
fAliplayer.setMute(true);
///设置播放器音量,范围0~1.
fAliPlayer.setVolume(1);
//倍速播放
///可选值：0.5，1.0, 1.5, 2.0
fAliplayer.setRate(1.0);
//切换多码率，自动码率切换
///在prepare成功之后，通过getMediaInfo可以获取到各个码流的信息，即TrackInfo
fAliplayer.getMediaInfo().then((value) {
//value 为 map， value['tracks'] 可以获取对应的 TrackInfos 列表信息，可以参考 Demo 中 AVPMediaInfo info = AVPMediaInfo.fromJson(value); 如何解析 TrackInfo
};
///在播放过程中，可以通过调用播放器的selectTrack方法切换播放的码流,参数为 TrackInfo 中的 trackIndex，切换的结果会在OnTrackChangedListener监听之后会回调
fAliplayer.selectTrack(index);
///自动码率切换
fAliplayer.selectTrack(-1);
//画面旋转、填充、镜像操作
//设置画面的镜像模式：水平镜像，垂直镜像，无镜像。
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_NONE);
//设置画面旋转模式：旋转0度，90度，180度，270度
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_0);
//设置画面缩放模式：宽高比填充，宽高比适应，拉伸填充
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALETOFILL);
2. 边播边缓存
更多关于Flutter视频播放插件flutter_aliplayer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
