备案控制台
文档
产品文档
输入文档关键字查找
首页 音视频终端 SDK 开发参考 单模块集成 播放器SDK Flutter框架 基础功能

基础功能

更新时间：
一键部署
产品详情
我的收藏

本文提供Flutter框架播放器SDK基础功能的使用示例，更多功能使用说明请参见进阶功能、API说明。

创建播放器

本节介绍如何用更简单的方式让Flutter框架播放器SDK播放视频，按照播放方式的不同可以分为手动播放和自动播放。

说明

如需播放ARTC流，除了需要在集成时引入RTS相关依赖，Android端还需在创建播放器前调用FlutterAliPlayerFactory.loadRtsLibrary();加载RtsSDK动态库。

  1. 创建播放器。

    创建单实例播放器。

    FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer();

    创建多实例播放器。

    需要在Flutter层管理playerId，在播放器的回调中会返回对应的playerId，用来通知Flutter层。

    FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer(playerId: playerId);

  2. 设置监听器。

    播放器支持设置多个监听器。

    • 创建手动播放时，OnPrepard必须设置，因为手动播放需要在OnPrepard回调中调用play开始播放。

    • OnTrackReady、OnError较为重要，建议您设置。

    以下示例仅展示部分接口，如下所示：

    //准备成功
fAliplayer.setOnPrepard((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. 创建播放源。

    • Flutter框架播放器SDK支持4种点播播放方式，包括：UrlSource播放、VidAuth播放（视频点播用户推荐使用）、VidSts播放、加密播放。

    • Flutter框架播放器SDK仅支持1种直播播放方式，为UrlSource播放。

    点播视频播放

    点播UrlSource播放

    使用点播UrlSource播放方式播放点播视频，需要将播放器的setUrl属性设置为播放地址。播放地址可以是第三方点播地址或阿里云点播服务中的播放地址。

    阿里云播放地址可以调用获取音视频播放地址接口获取。建议您集成点播服务端SDK来获取音视频播放地址，免去自签名的麻烦。调用接口获取音视频播放地址的示例请参见开发者门户。

    void onViewPlayerCreated(viewId) async {
  ///将渲染的View设置给播放器
  fAliplayer.setPlayerView(viewId);
  //设置播放源
  switch (_playMode) {
      //UrlSource播放方式
    case ModeType.URL:
      this.fAliplayer.setUrl("填写资源的播放地址"); //播放地址可以是第三方点播地址，或阿里云点播服务中的播放地址。
      break;
    default:
  }
}

    点播VidAuth播放（推荐）

    使用VidAuth播放方式播放点播视频，需要将播放器的vid属性设置为音视频ID，将playauth属性设置为音视频播放凭证。

    • 音视频ID可以在音视频上传完成后通过控制台（路径：媒资库>音/视频。）或服务端接口（SearchMedia）获取。

    • 音视频播放凭证可以调用获取音视频播放凭证接口获取。建议您集成点播服务端SDK来获取音视频播放凭证，免去自签名的麻烦。调用接口获取音视频播放凭证的示例请参见开发者门户。

    推荐视频点播用户采用此播放方式。相比STS播放方式，PlayAuth播放方式在易用性和安全性上更有优势，对比详情请参见凭证方式与STS方式对比。

    void onViewPlayerCreated(viewId) async {
  ///将渲染的View设置给播放器
  fAliplayer.setPlayerView(viewId);
  //设置播放源
  switch (_playMode) {
    //VidAuth播放方式
    case ModeType.AUTH:
      FlutterAliplayer.generatePlayerConfig().then((value) {
      this.fAliplayer.setVidAuth(
          vid: "填写资源的vid",
          region: "填写资源的region",//点播服务的接入地域，默认为cn-shanghai
          playAuth: "填写资源的播放凭证",
          playConfig: value);
        });
      break;
    default:
  }
}

    点播VidSts播放

    使用点播VidSts播放方式播放点播视频是指用STS临时凭证而非点播音视频播放凭证播放。STS临时Token需要提前获取，获取方式请参见创建RAM角色并进行STS临时授权。

    播放时需要将播放器的securityToken属性设置为STS临时Token，同时设置为STS临时Token生成的临时AK对（accessKeyId和accessKeySecret）。

    void onViewPlayerCreated(viewId) async {
  ///将渲染的View设置给播放器
  fAliplayer.setPlayerView(viewId);
  //设置播放源
  switch (_playMode) {
    //VidSts播放方式
    case ModeType.STS:
      FlutterAliplayer.generatePlayerConfig().then((value) {
      this.fAliplayer.setVidSts(
          vid: "填写资源的vid",
          region: "填写资源的region", //点播服务的接入地域，默认为cn-shanghai
          accessKeyId: "填写资源的鉴权id",
          accessKeySecret: "填写资源的鉴权密钥",
          securityToken: "填写资源的安全Token",
      	  playConfig: value);
    	});
      break;
    default:
  }
}

    点播加密播放

    点播视频支持HLS标准加密、阿里云私有加密和DRM加密。加密播放请参见如何播放加密视频。

    直播视频UrlSource播放

    使用UrlSource播放方式播放直播视频，需要将播放器的setUrl属性设置为直播拉流地址。播放地址可以是第三方直播地址或阿里云直播服务中的拉流地址。

    阿里云直播拉流地址可以通过直播控制台的地址生成器生成。详情请参见阿里云直播地址生成器。

    void onViewPlayerCreated(viewId) async {
 ///将渲染的View设置给播放器
 fAliplayer.setPlayerView(viewId);
 //设置播放源
 switch (_playMode) {
 //UrlSource播放方式
 case ModeType.URL:
 this.fAliplayer.setUrl("填写资源的播放地址"); //播放地址可以是第三方直播地址，或阿里云直播服务中的拉流地址。
 break;
 default:
 }
}

  4. 设置显示View。

    如果播放源有画面，那么需要设置显示的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),
 ],
 ),
 );
 },
 );

  5. 可选：开启自动播放，默认为关闭状态。

    fAliplayer.setAutoPlay(true);

  6. 准备播放。

    调用prepare()方法准备播放。

    fAliplayer.prepare();

  7. 开始播放。

    • 如果未开启自动播放，需要在OnPrepard回调中调用fAliplayer.play();开始播放视频。

    • 如果开启了自动播放，则不需要调用fAliplayer.play();，数据解析完成后将开始自动播放视频。

    fAliplayer.play();

控制播放

Flutter框架播放器SDK支持开始、暂停、从指定时间点播放等主流操作。

开始播放

开始播放视频，由play接口实现。示例如下：

 fAliplayer.play();

从指定时间开始播放

跳转到某个时刻进行播放，由seek接口实现。适用于用户拖拽进度条，或续播等需要从指定时间点开始播放的场景。示例如下：

////posotion为指定的时间，单位：毫秒。seekMode取值：FlutterAvpdef.ACCURATE（精准seek）和FlutterAvpdef.INACCURATE（非精准seek）
fAliplayer.seek(position,seekMode);

暂停播放

暂停播放视频，由pause接口实现。示例如下：

fAliplayer.pause();

停止播放

停止播放视频，由stop接口实现。示例如下：

fAliplayer.stop();

设置显示模式

Flutter框架播放器SDK支持填充、旋转、镜像等显示设置。

填充

支持设置宽高比适应、宽高比填充和拉伸填充这3种画面填充模式，由setScalingMode接口实现。示例如下：

//设置宽高比适应（将按照视频宽高比等比缩小到view内部，不会有画面变形）
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFIT);
//设置宽高比填充（将按照视频宽高比等比放大，充满view，不会有画面变形）
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFILL);
//设置拉伸填充（如果视频宽高比例与view比例不一致，会导致画面变形）
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALETOFILL);

旋转

画面按指定角度旋转，由setRotateMode接口实现。设置后还可查询旋转角度。示例如下：

//设置画面顺时针旋转0度
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_0);
//设置画面顺时针旋转90度
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_90);
//设置画面顺时针旋转180度
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_180);
//设置画面顺时针旋转270度
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_270);
//获取旋转角度
fAliplayer.getRotateMode();

镜像

支持水平镜像、垂直镜像和无镜像，由setMirrorMode接口实现。示例如下：

//设置无镜像
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_NONE);
//设置水平镜像
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_HORIZONTAL);
//设置垂直镜像
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_VERTICAL);

获取播放信息

Flutter框架播放器SDK支持获取当前的播放进度和播放时长。

获取当前播放进度

获取当前的播放时刻，在onInfo回调中获取，单位毫秒。示例如下：

fAliplayer.setOnInfo((infoCode,extraValue,extraMsg,playerId){
 if(infoCode==FlutterAvpdef.CURRENTPOSITION){
 //extraValue为当前播放进度
}
});

获取播放时长

获取视频总时长。需要在视频加载完成以后才可以获取到，可以在AVPEventPrepareDone事件后获取duration。示例如下：

fAliplayer.getMediaInfo().then((value){
 _videoDuration=value['duration'];
});

监听播放状态

监听播放器的状态，onStateChanged 回调参数为当前播放器状态。示例如下：

fAliplayer.setOnStateChanged((newState,playerId){
 //newState为播放状态
switch(newState){
 caseFlutterAvpdef.AVPStatus_AVPStatusIdle: //空转、闲时、静态
 break;
 caseFlutterAvpdef.AVPStatus_AVPStatusInitialzed: //初始化完成
 break;
 caseFlutterAvpdef.AVPStatus_AVPStatusPrepared: //准备完成
 break;
 caseFlutterAvpdef.AVPStatus_AVPStatusStarted: //正在播放
 break;
 caseFlutterAvpdef.AVPStatus_AVPStatusPaused: //播放暂停
break;
 caseFlutterAvpdef.AVPStatus_AVPStatusStopped: //播放停止
break;
 caseFlutterAvpdef.AVPStatus_AVPStatusCompletion: //播放完成
break;
 caseFlutterAvpdef.AVPStatus_AVPStatusError: //播放错误
break;
default:
 }
});

设置音量

设置音量包括音量调节和静音设置。

音量调节

调节音量大小，支持0～2倍，当音量大于1时，可能出现噪音，不推荐使用。由setVolume接口实现。设置后还可获取音量信息。示例如下：

//volume的值为0～2之间的实数。
fAliPlayer.setVolume(1);
//获取音量信息。
fAliPlayer.getVolume();

静音设置

将播放中的视频设置为静音状态，由setMute接口实现。示例如下：

fAliplayer.setMute(true);

倍速播放

Flutter框架播放器SDK提供了倍速播放视频的功能，通过设置setRate方法，能够以0.5倍~5倍速去播放视频。同时保持变声不变调。示例如下：

//设置倍速播放：支持0.5～5倍速的播放，通常按0.5的倍数来设置，例如0.5倍、1倍、1.5倍等
fAliplayer.setRate(1.0);

多清晰度设置

如果使用VID方式（VidAuth（推荐）及VidSts）播放，无需额外设置。Flutter框架播放器SDK会从点播服务获取清晰度列表。Flutter框架播放器SDK支持获取和切换清晰度，UrlSource播放方式暂不支持此设置。

获取清晰度

当视频加载完成后，可以获取视频的清晰度。

fAliplayer.getMediaInfo().then((value){
 AVPMediaInfoinfo=AVPMediaInfo.fromJson(value);
info.tracks.forEach((element){
 if(element.trackType==3){
 //清晰度
 Stringdefinition=element.trackDefinition;
//流索引
intindex=element.trackIndex;
 }
 }
});

切换清晰度

通过selectTrack方法切换清晰度，传递对应TrackInfo的index即可。

fAliplayer.selectTrack(trackIdx);

清晰度切换通知

清晰度切换成功回调。

fAliplayer.setOnTrackChanged((value,playerId){
 //有回调表示切换成功，切换失败接口暂未提供
});

循环播放

Flutter框架播放器SDK提供了循环播放视频的功能。调用setLoop开启循环播放，播放完成后，将会自动从头开始播放视频。示例如下：

fAliplayer.setLoop(true);

同时循环开始的回调将会使用onInfo通知。示例如下：

fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {
 if(infoCode == FlutterAvpdef.LOOPINGSTART){
 //循环播放开始通知
 }
});
文档推荐
  • 本页导读 （1）
文档反馈