ApsaraVideo VOD:ApsaraVideo Player SDK for Flutter の基本機能の使用方法の例

プレーヤーの作成

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

1. プレーヤーを作成する。

   プレーヤーインスタンスを作成します。

   // プレーヤーインスタンスを作成します。
   FlutterAliplayer fAliplayer = FlutterAliPlayerFactory.createAliPlayer();
   // traceID パラメーターを指定することをお勧めします。
   fAliplayer.setTraceID("traceID");

   複数のプレーヤーインスタンスを作成します。

   Flutter レイヤーでプレーヤーを作成する場合は、playerId パラメーターを設定する必要があります。 コールバックで返される playerId パラメーターは、プレーヤーの ID を示します。

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

2. リスナーを設定する。

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

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

   2. OnTrackReady と OnError を設定することをお勧めします。

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

   // 準備完了のリスナー。
   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) {});
   // バッファや再生の進捗状況など、イベントコールバックのリスナー。 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. 再生ソースを設定する。

   1. ApsaraVideo Player SDK for Flutter は、UrlSource、VidAuth、および VidSts に基づくビデオオンデマンド (VOD) 再生をサポートしています。 暗号化された VOD 再生もサポートされています。 ApsaraVideo VOD では、VidAuth に基づいてビデオを再生することをお勧めします。

   2. ApsaraVideo Player SDK for Flutter は、UrlSource に基づくライブストリーミングのみをサポートしています。

   VOD 再生

   UrlSource

   UrlSource メソッドを使用してオンデマンドビデオを再生する場合は、setUrl パラメーターをビデオの再生 URL に設定する必要があります。 再生 URL は、ApsaraVideo VOD またはサードパーティサービスによって生成されます。

   GetPlayInfo[GetPlayInfo] 操作を呼び出して、ApsaraVideo VOD に保存されているメディアファイルの再生 URL を取得します。 ApsaraVideo VOD SDK を使用して ApsaraVideo VOD でメディア再生 URL を取得することをお勧めします。 これにより、複雑な署名計算から解放されます。 操作の詳細については、OpenAPI エクスプローラーをご覧ください。

   void onViewPlayerCreated(viewId) async {
     // プレーヤーのレンダリングビューを指定します。
     fAliplayer.setPlayerView(viewId);
     // 再生ソースを設定します。
     switch (_playMode) {
         // UrlSource ベースのストリーミングメソッドを指定します。
       case ModeType.URL:
         this.fAliplayer.setUrl("再生 URL"); // 必須。再生 URL。 ApsaraVideo VOD またはサードパーティサービスによって生成された再生 URL を指定できます。
         break;
       default:
     }
   }

   (推奨) VidAuth

   VidAuth メソッドを使用して VOD 再生を行う場合は、vid パラメーターをオーディオまたはビデオファイルの ID に設定し、playAuth パラメーターを再生クレデンシャルに設定する必要があります。

   1. メディアファイルオーディオ/ビデオオーディオまたはビデオファイルをアップロードした後、ApsaraVideo VOD コンソールにログインし、 > を選択して、オーディオまたはビデオファイルの ID を表示できます。 または、ApsaraVideo VOD SDK によって提供される SearchMedia 操作を呼び出して、ID を取得することもできます。

   2. GetVideoPlayAuth[GetVideoPlayAuth] 操作を呼び出して、再生クレデンシャルを取得できます。 ApsaraVideo VOD SDK を使用して、メディア再生のクレデンシャルを取得することをお勧めします。 これにより、複雑な署名計算から解放されます。 操作の詳細については、OpenAPI エクスプローラーをご覧ください。

   ApsaraVideo VOD でのビデオ再生には、VidAuth メソッドを使用することをお勧めします。 Security Token Service (STS) ベースの再生と比較して、VidAuth ベースの再生は使いやすく、より安全です。 2 つの再生方法の違いの詳細については、「クレデンシャルと STS の比較」をご参照ください。

   void onViewPlayerCreated(viewId) async {
     // プレーヤーのレンダリングビューを指定します。
     fAliplayer.setPlayerView(viewId);
     // createVidPlayerConfigGenerator メソッドと setPreviewTime メソッドを呼び出します。
     FlutterAliplayer.createVidPlayerConfigGenerator();
     FlutterAliplayer.setPreviewTime(0);
     // 再生ソースを設定します。
     FlutterAliplayer.generatePlayerConfig().then((value) {
         fAliplayer.setVidAuth(
             vid: "Vid",// 必須。ビデオ ID。
             region: "アクセスリージョン",// 必須。ApsaraVideo VOD がアクティブ化されているリージョン。 デフォルト値: cn-shanghai。
             playAuth: "<yourPlayAuth>",// 必須。再生クレデンシャル。 再生クレデンシャルを生成するには、ApsaraVideo VOD の GetVideoPlayAuth 操作を呼び出します。
             playConfig: value);
           });    
     }
   }

   VidSts

   VidSts に基づいてオンデマンドビデオを再生する場合、再生クレデンシャルの代わりに一時的な STS トークンが使用されます。 この場合、オンデマンドでビデオを再生する前に、STS トークンと AccessKey ペア (AccessKey ID と AccessKey シークレット) を取得する必要があります。 STS トークンの取得方法の詳細については、「STS を使用してビデオをアップロードする」をご参照ください。

   void onViewPlayerCreated(viewId) async {
     // プレーヤーのレンダリングビューを指定します。
     fAliplayer.setPlayerView(viewId);
     // createVidPlayerConfigGenerator メソッドと setPreviewTime メソッドを呼び出します。
     FlutterAliplayer.createVidPlayerConfigGenerator();
     FlutterAliplayer.setPreviewTime(0);
     // VidSts ベースの再生方法を指定します。
     FlutterAliplayer.generatePlayerConfig().then((value) {
        fAliplayer.setVidSts(
             vid: "Vid",// 必須。ビデオ ID。
             region: "アクセスリージョン",// 必須。ApsaraVideo VOD がアクティブ化されているリージョン。 デフォルト値: cn-shanghai。
             accessKeyId: "<yourAccessKeyId>",// 必須。一時的な STS トークンが発行されたときに生成される AccessKey ID。 AccessKey ID を生成するには、STS の AssumeRole 操作を呼び出します。
             accessKeySecret: "<yourAccessKeySecret>",// 必須。一時的な STS トークンが発行されたときに生成される AccessKey シークレット。 AccessKey シークレットを生成するには、STS の AssumeRole 操作を呼び出します。
             securityToken: "<yourSecurityToken>",// 必須。STS トークン。 STS トークンを生成するには、STS の AssumeRole 操作を呼び出します。
         	  playConfig: value);
       	});
          
   }

   暗号化再生

   ApsaraVideo VOD は、HTTP-Live-Streaming (HLS) 暗号化、Alibaba Cloud 独自の暗号化、およびデジタル著作権管理 (DRM) 暗号化をサポートしています。 詳細については、「暗号化されたビデオを再生する」をご参照ください。

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

   UrlSource メソッドを使用してライブストリームを再生する場合は、setUrl パラメーターをライブストリームのストリーミング URL に設定する必要があります。 ライブストリーミング URL は、ApsaraVideo Live またはサードパーティサービスによって生成できます。

   ApsaraVideo Live コンソールは、ライブストリーミング URL の生成に役立つ URL ジェネレーターを提供しています。 詳細については、「URL ジェネレーター」をご参照ください。

   void onViewPlayerCreated(viewId) async {
     // プレーヤーのレンダリングビューを指定します。
     fAliplayer.setPlayerView(viewId);
     // 再生ソースを設定します。
     switch (_playMode) {
       // UrlSource ベースのストリーミングメソッドを指定します。
       case ModeType.URL:
         this.fAliplayer.setUrl("ストリーミング URL を入力してください"); // ストリーミング URL は、ApsaraVideo Live またはサードパーティサービスによって生成されます。
         break;
       default:
     }
   }

4. ビューを設定する。

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

   @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. 再生を開始する。

   1. 自動再生機能が有効になっていない場合は、fAliplayer.play() を OnPrepard コールバックで呼び出して、再生を開始する必要があります。

   2. 自動再生機能が有効になっている場合、fAliplayer.play() を呼び出す必要はありません。データが解析された後、ビデオは自動的に再生されます。

   fAliplayer.play();

再生の制御

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

[再生を開始]

 fAliplayer.play();

特定の時点から再生を開始する

//// position パラメーターは、再生を開始する時点を指定します。単位：ミリ秒。 seekMode パラメーターの有効な値：FlutterAvpdef.ACCURATE および FlutterAvpdef.INACCURATE。 FlutterAvpdef.ACCURATE の値は正確なシークを示します。 FlutterAvpdef.INACCURATE の値は不正確なシークを示します。
fAliplayer.seek(position,seekMode);

// 特定の位置から動画の再生を開始します。 prepare メソッドを呼び出す前に、このメソッドを呼び出す必要があります。構成は一度だけ有効になります。 time パラメーターは開始時間を指定します。単位：ミリ秒。 seekMode パラメーターの有効な値：FlutterAvpdef.ACCURATE および FlutterAvpdef.INACCURATE。 FlutterAvpdef.ACCURATE の値は正確なシークを示します。 FlutterAvpdef.INACCURATE の値は不正確なシークを示します。
fAliplayer.setStartTime(time, seekMode);

[再生を一時停止]

fAliplayer.pause();

[再生を再開]

fAliplayer.play(); // 再生を再開します。

[再生を停止]

fAliplayer.stop(); // 再生を停止します。

プレーヤーを破棄する

// プレーヤーを同期的に破棄します。システムは自動的に stop メソッドを呼び出します。
fAliplayer.destroy();
// プレーヤーを非同期的に破棄します。システムは自動的に stop メソッドを呼び出します。
fAliplayer.releaseAsync();

表示モードを設定する

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

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

// ビューに合わせて動画をスケールインします。
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFIT);
// ビューに合わせて動画をスケールアウトします。
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALEASPECTFILL);
// ビューに合わせて動画をストレッチします。動画の縦横比がビューの縦横比と異なる場合、画像が歪むことがあります。
fAliplayer.setScalingMode(FlutterAvpdef.AVP_SCALINGMODE_SCALETOFILL);

ビデオ画像を回転する

// ビデオを回転しません。
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();

ミラーリングモードを指定する

// ミラーリングなしを設定します。
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_NONE);
// ビデオを水平方向にミラーリングします。
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_HORIZONTAL);
// ビデオを垂直方向にミラーリングします。
fAliplayer.setMirrorMode(FlutterAvpdef.AVP_MIRRORMODE_VERTICAL); 

再生情報を取得する

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

再生進捗を取得する

fAliplayer.setOnInfo((infoCode,extraValue,extraMsg,playerId){
 if(infoCode==FlutterAvpdef.CURRENTPOSITION){
 // extraValue パラメーターは現在の再生位置を示します。
}
});

再生時間を取得する

fAliplayer.getMediaInfo().then((value){
 // 合計動画再生時間を取得します。
 _videoDuration=value['duration'];
});

再生ステータスを監視する

fAliplayer.setOnStateChanged((newState, playerId) {
  // newState パラメーターは再生ステータスを示します。
  switch (newState) {
    case FlutterAvpdef.AVPStatus_AVPStatusIdle: // プレーヤーはアイドル状態です。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusInitialzed: // プレーヤーは初期化されています。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPrepared: // プレーヤーは準備されています。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStarted: // 再生中です。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusPaused: // 再生は一時停止されています。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusStopped: // 再生は停止されています。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusCompletion: // 再生は完了しました。
      break;
    case FlutterAvpdef.AVPStatus_AVPStatusError: // 再生に失敗しました。
      break;
    default:
  }
});

ボリュームを設定する

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

[ボリュームの変更]

// 音量を 0 から 2 の実数に設定します。
fAliPlayer.setVolume(1);
// 音量に関する情報を取得します。
fAliPlayer.getVolume();

ビデオをミュートにする

fAliplayer.setMute(true); // 再生中の動画をミュートにする

再生速度を指定する

// 0.5 倍から 5 倍までの再生速度がサポートされています。一般的な再生速度は 0.5 倍の倍数で、たとえば 0.5 倍、1 倍、1.5 倍などです。
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){
            // 解像度。
            String definition=element.trackDefinition;
            // メディアストリームのインデックス。
            int index=element.trackIndex;
          }
        });
      });    
});

定義を切り替える

fAliplayer.selectTrack(trackIdx);

定義切り替え成功時のコールバックを設定する

fAliplayer.setOnTrackChanged((value,playerId){
 // コールバックが呼び出された場合、ビデオの定義が切り替えられます。そうでない場合、定義の切り替えは失敗します。Flutter 用 ApsaraVideo Player SDK は、切り替え失敗のコールバックを設定するためのメソッドを提供していません。
});

ループ再生の設定

fAliplayer.setLoop(true); // ループ再生を有効にする

fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {
 if(infoCode == FlutterAvpdef.LOOPINGSTART){
 // ループ再生の開始時、ユーザーに通知します。
 }
});

再生ログを取得する

// ログ出力機能を有効にします。
FlutterAliplayer.enableConsoleLog(true);
// ログレベルを指定します。デフォルト値: AF_LOG_LEVEL_INFO。問題をトラブルシューティングするには、このパラメーターを AF_LOG_LEVEL_TRACE に設定します。
FlutterAliplayer.setLogLevel(FlutterAvpdef.AF_LOG_LEVEL_INFO);

/// ログレベルを設定します。トラブルシューティングの場合は、AF_LOG_LEVEL_TRACE に設定します。
FlutterAliplayer.setLogLevel(LogLevel.AF_LOG_LEVEL_INFO);
/// ログ記録を有効または無効にします。
FlutterAliplayer.enableConsoleLog(true);
/// ログコールバック情報を設定します。
FlutterAliplayer.setLogInfoCallBack((level, msg) {
   print("[LOG][LEVEL][$level] $msg");
});
/// フレームレベルのログコールバックを設定します。これは通常、トラブルシューティングのために有効にします。
/// 0: 無効。1: 有効。
FlutterAliplayer.setLogOption(value);