ApsaraVideo Player SDK for Flutterの基本機能の使用例 - - Alibaba Cloud ドキュメントセンター

このトピックでは、ApsaraVideo Player SDK for Flutterの基本機能について説明します。このトピックでは、基本機能の使用方法の例も提供します。 ApsaraVideo Player SDK For Flutterの高度な機能とAPI操作の詳細については、「高度な機能」および「APIの説明」のトピックを参照してください。

プレイヤーの作成

このセクションでは、ApsaraVideo Player SDK for Flutterを使用してビデオを再生する方法について説明します。手動再生と自動再生がサポートされています。

説明

Alibaba Real-Time Communication (ARTC) でストリームを再生する前に、ApsaraVideo Player SDK for Flutterを統合する際に、プロジェクトにReal-Time Streaming (RTS) SDKの依存関係を追加する必要があります。また、AndroidデバイスでFlutterAliPlayerFactory.loadRtsLibrary() を呼び出して、RTS SDKの動的ライブラリをロードする必要があります。

プレイヤーを作成します。
プレーヤーインスタンスを作成します。
```
// Create a player instance.
FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
// We recommend that you specify the traceID parameter. 
fAliplayer.setTraceID("traceID");
```
複数のプレーヤーインスタンスを作成します。
Flutterレイヤーでプレーヤーを作成するときは、playerIdパラメーターを指定する必要があります。 playerコールバックで返されるplayerIdパラメーターは、プレーヤーのIDを示します。
```
FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer(playerId: playerId);
```

リスナーを設定します。

プレーヤーに複数のリスナーを設定できます。

手動再生を開始するには、OnPrepardコールバックでplayメソッドを呼び出す必要があるため、OnPrepardを設定する必要があります。
OnTrackReadyとOnErrorを設定することを推奨します。

次のコードブロックは、特定のリスナーのメソッドを示しています。

// The listener for successful preparation.
fAliplayer.setOnPrepard((playerId) {});
// The listener for the display of the first frame.
fAliplayer.setOnRenderingStart((playerId) {});
// The listener for changes in the width or height of a video.
fAliplayer.setOnVideoSizeChanged((width, height,playerId) {});
// The listener for changes in the player status.
fAliplayer.setOnStateChanged((newState,playerId) {});
// The listener for the loading state.
fAliplayer.setOnLoadingStatusListener(
    loadingBegin: (playerId) {},
    loadingProgress: (percent, netSpeed,playerId) {},
    loadingEnd: (playerId) {});
// The listener for seeking completion.
fAliplayer.setOnSeekComplete((playerId) {});
// The listener for event callbacks, such as the buffer and playback progress. You can obtain event information based on the value of the FlutterAvpdef.infoCode parameter.
fAliplayer.setOnInfo((infoCode, extraValue, extraMsg,playerId) {});
// The listener for playback completion.
fAliplayer.setOnCompletion((playerId) {});
// The listener for a stream that is ready.
fAliplayer.setOnTrackReady((playerId) {});
// The listener for a snapshot that is taken.
fAliplayer.setOnSnapShot((path,playerId) {});
// The listener for errors.
fAliplayer.setOnError((errorCode, errorExtra, errorMsg,playerId) {});
// The listener for stream switching.
fAliplayer.setOnTrackChanged((value,playerId) {});

再生ソースを設定します。
- ApsaraVideo Player SDK for Flutterは、UrlSource、VidAuth、およびVidStsに基づくビデオオンデマンド (VOD) 再生をサポートしています。暗号化VOD再生もサポートされています。 ApsaraVideo VODでVidAuthに基づいてビデオを再生することを推奨します。
- ApsaraVideo Player SDK for Flutterは、UrlSourceに基づくライブストリーミングのみをサポートします。
VOD再生
UrlSource
VOD再生にUrlSourceメソッドを使用する場合は、setUrlパラメーターをオーディオまたはビデオファイルのストリーミングURLに設定する必要があります。再生URLは、ApsaraVideo VODまたはサードパーティサービスによって生成されます。
GetPlayInfo操作を呼び出して、ApsaraVideo VODに保存されているメディアファイルの再生URLを取得できます。 ApsaraVideo VODでメディア再生URLを取得するには、ApsaraVideo VOD SDKを使用することを推奨します。これにより、複雑な署名計算から解放されます。 GetPlayInfo操作の詳細については、
OpenAPI Explorerをご参照ください。
```
void onViewPlayerCreated(viewId) async {
  // Specify the render view for the player.
  fAliplayer.setPlayerView(viewId);
  // Configure the playback source.
  switch (_playMode) {
      // Specify the UrlSource-based playback method.
    case ModeType.URL:
      this.fAliplayer.setUrl("Playback URL"); // Required. The playback URL. You can specify a playback URL generated by ApsaraVideo VOD or a third-party service. 
      break;
    default:
  }
}
```
(推奨) VidAuth
VOD再生にVidAuthメソッドを使用する場合は、vidパラメーターをオーディオまたはビデオファイルのIDに設定し、playAuthパラメーターを再生資格情報に設定する必要があります。
- オーディオまたはビデオファイルをアップロードした後、ApsaraVideo VODコンソールにログインし、[メディアファイル] > [オーディオ /ビデオ] を選択して、オーディオまたはビデオファイルのIDを表示します。または、
  IDを取得するためにApsaraVideo VOD SDKによって提供されるSearchMedia操作を呼び出すこともできます。
- GetVideoPlayAuth操作を呼び出して、再生資格情報を取得できます。 ApsaraVideo VOD SDKを使用して、メディア再生用の資格情報を取得することを推奨します。これにより、複雑な署名計算から解放されます。 GetVideoPlayAuth操作の詳細については、
  OpenAPI Explorerをご参照ください。
ApsaraVideo VODでのビデオ再生には、VidAuthメソッドを使用することを推奨します。 VidStsベースの再生と比較して、VidAuthベースの再生は使いやすく、より安全です。 2つの再生方法の比較の詳細については、「資格情報とSTSの比較」をご参照ください。
```
void onViewPlayerCreated(viewId) async {
  // Specify the render view for the player.
  fAliplayer.setPlayerView(viewId);
  // Call the createVidPlayerConfigGenerator method.
  FlutterAliplayer.createVidPlayerConfigGenerator();
  // Configure the playback source.
  FlutterAliplayer.generatePlayerConfig().then((value) {
      fAliplayer.setVidAuth(
          vid: "Vid",// Required. The video ID. 
          region: "Access region",// Required. The region in which ApsaraVideo VOD is activated. Default value: cn-shanghai. 
          playAuth: "<yourPlayAuth>",// Required. The playback credential. To generate the playback credential, call the GetVideoPlayAuth operation in ApsaraVideo VOD. 
          playConfig: value);
        });    
  }
}
```
VidSts
VOD再生にVidStsメソッドを使用する場合、再生資格情報の代わりに一時的なSecurity Token Service (STS) トークンが使用されます。この場合、オンデマンドでビデオを再生する前に、STSトークンとAccessKeyペア (AccessKey IDとAccessKey secret) を取得する必要があります。 STSトークンの取得方法の詳細については、「STSを使用した動画のアップロード」をご参照ください。
```
void onViewPlayerCreated(viewId) async {
  // Specify the render view for the player.
  fAliplayer.setPlayerView(viewId);
  // Call the createVidPlayerConfigGenerator method.
  FlutterAliplayer.createVidPlayerConfigGenerator();
  // Specify the VidSts-based playback method.
  FlutterAliplayer.generatePlayerConfig().then((value) {
     fAliplayer.setVidSts(
          vid: "Vid",// Required. The video ID. 
          region: "Access region",// Required. The region in which ApsaraVideo VOD is activated. Default value: cn-shanghai. 
          accessKeyId: "<yourAccessKeyId>",// Required. The AccessKey ID that is generated when the temporary STS token is issued. To generate the AccessKey ID, call the AssumeRole operation in STS. 
          accessKeySecret: "<yourAccessKeySecret>",// Required. The AccessKey secret that is generated when the temporary STS token is issued. To generate the AccessKey secret, call the AssumeRole operation in STS. 
          securityToken: "<yourSecurityToken>",// Required. The STS token. To generate an STS token, call the AssumeRole operation in STS. 
      	  playConfig: value);
    	});
       
}
```
暗号化再生
ApsaraVideo VODは、HTTPライブストリーミング (HLS) 暗号化、Alibaba Cloud独自の暗号化、およびデジタル著作権管理 (DRM) 暗号化をサポートしています。暗号化ビデオの再生方法の詳細については、「暗号化ビデオの再生」をご参照ください。
UrlSourceベースのライブストリーミング
UrlSourceメソッドを使用してライブストリームを再生する場合は、setUrlパラメーターをライブストリームのストリーミングURLに設定する必要があります。ライブストリーミングURLは、ApsaraVideo liveまたはサードパーティサービスによって生成できます。
ApsaraVideo Liveコンソールには、ライブストリーミングURLの生成に役立つURLジェネレータがあります。詳細については、
URLジェネレーターをご参照ください。
```
void onViewPlayerCreated(viewId) async {
  // Specify the render view for the player.
  fAliplayer.setPlayerView(viewId);
  // Configure the playback source.
  switch (_playMode) {
    // Specify the UrlSource-based streaming method.
    case ModeType.URL:
      this.fAliplayer.setUrl("Enter the streaming URL"); // The streaming URL is generated by ApsaraVideo Live or a third-party service. 
      break;
    default:
  }
}
```

UIビューを設定します。

再生ソースにビデオ画像が含まれている場合は、プレーヤーにビデオ画像を表示するようにビューを設定します。サンプルコード：

@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),
          ],
        ),
      );
    },
  );

(オプション) 自動再生機能を有効にします。デフォルトでは、この機能は無効になっています。
```
fAliplayer.setAutoPlay(true);
```
プレイヤーを準備します。
prepare() メソッドを呼び出して、プレイヤーを準備します。
```
fAliplayer.prepare();
```
再生を開始します。
- 自動再生機能が無効になっている場合は、OnPrepardコールバックでfAliplayer.play() を呼び出して再生を開始する必要があります。
- 自動再生機能が有効になっている場合は、fAliplayer.play() を呼び出す必要はありません。データが解析されると、ビデオは自動的に再生されます。
```
fAliplayer.play();
```

再生のコントロール

ApsaraVideo Player SDK for Flutterを使用すると、メディアの再生を管理できます。たとえば、再生を開始または一時停止したり、特定の時点で再生を開始したりできます。

再生を開始

playメソッドを呼び出して再生を開始できます。サンプルコード：

 fAliplayer.play();

特定の時点で再生を開始

seekメソッドを呼び出して、特定の時点でビデオを再生できます。この機能は、プログレスバーのスライダーをドラッグするとき、または特定の時点からビデオを再開するときに使用されます。サンプルコード：

//// The position parameter specifies the point in time from which playback starts. Unit: milliseconds. Valid values of the seekMode parameter: FlutterAvpdef.ACCURATE and FlutterAvpdef.INACCURATE. A value of FlutterAvpdef.ACCURATE indicates accurate seeking. A value of FlutterAvpdef.INACCURATE indicates inaccurate seeking.
fAliplayer.seek(position,seekMode);

再生の一時停止

pauseメソッドを呼び出して、再生を一時停止できます。サンプルコード：

fAliplayer.pause();

再生の停止

stopメソッドを呼び出して、再生を停止できます。サンプルコード：

fAliplayer.stop();

表示モードの設定

ApsaraVideo Player SDK for Flutterは、スケーリング、回転、ミラーリングなどの表示設定をサポートしています。

ビデオのスケールイン、スケールアウト、またはストレッチ

setScaleModeメソッドを呼び出して、元のアスペクト比を変更せずにビデオをスケールインまたはスケールアウトしたり、ビデオをストレッチしたりできます。サンプルコード：

// Scale in the video to fit the view. The aspect ratio of the video is maintained.
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFIT);
// Scale out the video to fill the view. The aspect ratio of the video is maintained.
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFILL);
// Stretch the video to fill the view. This may change the aspect ratio of the video. If the aspect ratios of the video and the view are different, image distortion may occur.
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALETOFILL);

回転ビデオ画像

setRotateModeメソッドを呼び出して、ビデオ画像の回転角度を指定できます。イメージを回転させた後、回転角度を照会することもできます。サンプルコード：

// Set the rotation angle to 0° in the clockwise direction.
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_0);
// Set the rotation angle to 90° in the clockwise direction.
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_90);
// Set the rotation angle to 180° in the clockwise direction.
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_180);
// Set the rotation angle to 270° in the clockwise direction.
fAliplayer.setRotateMode(FlutterAvpdef.AVP_ROTATE_270);
// Query the rotation angle.
fAliplayer.getRotateMode();

ミラーリングモードの指定

setMirrorModeメソッドを呼び出して、ミラーリングモードを指定できます。水平ミラーリング、垂直ミラーリング、およびミラーリングなしがサポートされています。サンプルコード：

// Specify no mirroring for video images.
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_NONE);
// Specify horizontal mirroring for video images.
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_HORIZONTAL);
// Specify vertical mirroring for video images.
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_VERTICAL);

再生情報の取得

ApsaraVideo Player SDK for Flutterを使用すると、現在の再生の進行状況や再生時間などの再生情報を取得できます。

再生の進行状況の取得

onInfoコールバックから再生の進行状況を取得できます。単位：ミリ秒。サンプルコード：

fAliplayer.setOnInfo((infoCode,extraValue,extraMsg,playerId){
 if(infoCode==FlutterAvpdef.CURRENTPOSITION){
 // The extraValue parameter indicates the current playback position.
}
});

再生時間の取得

ビデオの合計時間を取得できます。ビデオの長さは、ビデオがロードされた後にのみ取得できます。合計ビデオ期間は、AVPEventPrepareDoneイベントがトリガーされた後、durationパラメーターで返されます。サンプルコード：

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

Listen to the playback status

onStateChangedコールバックからプレーヤーのステータスを取得できます。サンプルコード：

fAliplayer.setOnStateChanged((newState, playerId) {
  // The newState parameter indicates the playback status.
  switch (newState) {
    case FlutterAvpdef.AVPStatus_AVPStatusIdle: // The player is idle.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusInitialzed: // The player is initialized.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPrepared: // The player is prepared.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStarted: // The playback is in progress.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPaused: // The playback is paused.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStopped: // The playback is stopped.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusCompletion: // The playback is complete.
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusError: // The playback failed.
      break;
    default:
  }
});

ボリュームの設定

Flutter用のApsaraVideo Player SDKを使用すると、ビデオの音量を変更したり、ビデオをミュートしたりできます。

ボリュームの変更

ビデオの音量を元の音量の最大2倍に変更できます。音量を1より大きい値に設定すると、ノイズが発生することがあります。ボリュームを1より大きい値に設定しないことを推奨します。 setVolumeメソッドを呼び出して、ボリュームを変更できます。ビデオの現在の音量を取得することもできます。サンプルコード：

// Set the volume to a real number from 0 to 2. 
fAliPlayer.setVolume(1);
// Obtain the information about the volume. 
fAliPlayer.getVolume();

Mute theビデオ

setMuteメソッドを呼び出して、再生中のビデオをミュートできます。サンプルコード：

fAliplayer.setMute(true);

再生速度の指定

ApsaraVideo Player SDK for Flutterでは、setRateメソッドを呼び出して再生速度を変更できます。 0.5xから5xまでの再生速度がサポートされています。オーディオピッチは、異なる速度で変化しないままである。サンプルコード：

// Playback speeds ranging from 0.5x to 5x are supported. Common playback speeds are multiples of 0.5x, such as 0.5x, 1x, and 1.5x.
fAliplayer.setRate(1.0);

マルチ定義再生の設定

VidAuthまたはVidStsメソッドを使用してビデオを再生する場合、マルチ定義再生を設定する必要はありません。 VidAuthメソッドを使用してビデオを再生することを推奨します。 ApsaraVideo Player SDK for Flutterは、ApsaraVideo VODからビデオ定義を自動的に取得します。 SDKを使用すると、ビデオ定義を取得し、定義を切り替えることができます。この機能は、UrlSourceベースの再生ではサポートされません。

定義の取得

ビデオがロードされた後、ビデオの定義情報を取得できます。

fAliplayer.setOnPrepared((playerId) {
  fAliplayer.getMediaInfo().then((value){
        AVPMediaInfoinfo info=AVPMediaInfo.fromJson(value);
        info.tracks.forEach((element){
          if(element.trackType==3){
            // The definition.
            String definition=element.trackDefinition;
            // The index of media streams.
            int index=element.trackIndex;
          }
        });
      });    
});

Switch between definitions

selectTrackメソッドを呼び出して、切り替え先の定義に対応するインデックスにTrackInfoパラメーターを設定できます。

fAliplayer.selectTrack(trackIdx);

正常な定義切り替えのためのコールバックの設定

正常に定義を切り替えるためのコールバックを設定できます。

fAliplayer.setOnTrackChanged((value,playerId){
 // If the callback is invoked, the video definition is switched. Otherwise, the definition fails to be switched. ApsaraVideo Player SDK for Flutter does not provide a method for you to configure a callback for switching failure.
});

ループ再生の設定

ApsaraVideo Player SDK for Flutterはループ再生をサポートしています。 setLoopメソッドを呼び出して、ループ再生を有効にします。ループ再生機能を使用すると、ビデオの再生が終了した後、最初からビデオを再生できます。サンプルコード：

fAliplayer.setLoop(true);

onInfoコールバックは、ループ再生の開始時に呼び出されます。サンプルコード：

fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {
 if(infoCode == FlutterAvpdef.LOOPINGSTART){
 // Notifies that the loop playback starts.
 }
});

再生ログの取得

ApsaraVideo Player SDK for Flutterを使用すると、再生ログを取得できます。 enableConsoleLogメソッドを呼び出して、ログの印刷を有効にします。サンプルコード：

// Enable the log printing feature.
FlutterAliplayer.enableConsoleLog(true);
// Specify the log level. Default value: AF_LOG_LEVEL_INFO. To troubleshoot issues, set this parameter to AF_LOG_LEVEL_TRACE.
FlutterAliplayer.setLogLevel(FlutterAvpdef.AF_LOG_LEVEL_INFO);

プレイヤーの作成

VOD再生

UrlSource

(推奨) VidAuth

VidSts

暗号化再生

UrlSourceベースのライブストリーミング