このトピックでは、ApsaraVideo Player SDK for Flutter の基本機能の使用例を紹介します。詳細については、高度な機能および API リファレンスをご参照ください。
データソース (DataSource) の設定
ApsaraVideo Player SDK for Flutter は、ビデオオンデマンド (VOD) の再生方法として、VidAuth (推奨)、VidSts、UrlSource、暗号化再生の 4 つをサポートしています。
ApsaraVideo Player SDK for Flutter は、ライブストリーミングの再生方法として、UrlSource のみをサポートしています。
VOD 再生
VidAuth を使用した VOD 再生 (推奨)
VidAuth を使用して VOD 動画を再生するには、プレーヤーの `vid` プロパティにオーディオまたはビデオの ID を設定し、`playauth` プロパティに再生認証情報を設定します。
オーディオまたはビデオファイルがアップロードされた後、ApsaraVideo VOD コンソールで [メディアライブラリ] > [オーディオ/ビデオ] を選択するか、SearchMedia 操作を呼び出すことで、その ID を取得できます。
GetVideoPlayAuth 操作を呼び出すことで、再生認証情報を取得できます。自己署名の必要性を避けるため、SDK を使用して再生認証情報を取得することを推奨します。この操作の呼び出し例については、Developer Portal をご参照ください。
ApsaraVideo VOD ユーザーには、この再生方法の使用を推奨します。PlayAuth 方式は STS 方式よりも安全で使いやすいです。詳細な比較については、「認証情報ベースの方式と STS ベースの方式の比較」をご参照ください。
void onViewPlayerCreated(viewId) async {
// プレーヤーのレンダリングビューを設定します。
fAliplayer.setPlayerView(viewId);
// 注:generatePlayerConfig を呼び出す前に、createVidPlayerConfigGenerator() と setPreviewTime() を呼び出す必要があります。
FlutterAliplayer.createVidPlayerConfigGenerator();
FlutterAliplayer.setPreviewTime(0);
// 再生ソースを設定します。
FlutterAliplayer.generatePlayerConfig().then((value) {
fAliplayer.setVidAuth(
vid: "Your Vid",// 必須。動画 ID (VideoId)。
region: "Your Region",// 必須。ApsaraVideo VOD が有効化されているリージョン。デフォルト値:cn-shanghai。
playAuth: "<yourPlayAuth>",// 必須。再生認証情報。ApsaraVideo VOD の GetVideoPlayAuth 操作を呼び出して認証情報を生成する必要があります。
playConfig: value);
});
}
}VidSts を使用した VOD 再生
VidSts を使用して VOD 動画を再生するには、VOD 再生認証情報の代わりに、一時的な Security Token Service (STS) 認証情報を使用する必要があります。事前に STS トークンと一時的な AccessKey ペア (AccessKey ID と AccessKey Secret) を取得する必要があります。詳細については、「STS トークンの取得」をご参照ください。
void onViewPlayerCreated(viewId) async {
// プレーヤーのレンダリングビューを設定します。
fAliplayer.setPlayerView(viewId);
// 注:generatePlayerConfig を呼び出す前に、createVidPlayerConfigGenerator() と setPreviewTime() を呼び出す必要があります。
FlutterAliplayer.createVidPlayerConfigGenerator();
FlutterAliplayer.setPreviewTime(0);
// VidSts を使用した再生。
FlutterAliplayer.generatePlayerConfig().then((value) {
fAliplayer.setVidSts(
vid: "Your Vid",// 必須。動画 ID (VideoId)。
region: "Your Region",// 必須。ApsaraVideo VOD が有効化されているリージョン。デフォルト値:cn-shanghai。
accessKeyId: "<yourAccessKeyId>",// 必須。一時的な AccessKey ペアの AccessKey ID。STS の AssumeRole 操作を呼び出して AccessKey ID を生成する必要があります。
accessKeySecret: "<yourAccessKeySecret>",// 必須。一時的な AccessKey ペアの AccessKey Secret。STS の AssumeRole 操作を呼び出して AccessKey Secret を生成する必要があります。
securityToken: "<yourSecurityToken>",// 必須。STS トークン。STS の AssumeRole 操作を呼び出してトークンを生成する必要があります。
playConfig: value);
});
}UrlSource を使用した VOD 再生
UrlSource を使用して VOD 動画を再生するには、プレーヤーの `setUrl` プロパティに再生 URL を設定します。再生 URL には、サードパーティの URL または ApsaraVideo VOD の再生 URL を使用できます。
GetPlayInfo 操作を呼び出すことで、Alibaba Cloud の再生 URL を取得できます。自己署名の必要性を避けるため、SDK を使用して再生 URL を取得することを推奨します。この操作の呼び出し例については、Developer Portal をご参照ください。
void onViewPlayerCreated(viewId) async {
// プレーヤーのレンダリングビューを設定します。
fAliplayer.setPlayerView(viewId);
// 再生ソースを設定します。
switch (_playMode) {
// UrlSource を使用した再生。
case ModeType.URL:
this.fAliplayer.setUrl("Playback URL"); // 必須。再生 URL。サードパーティの VOD URL または ApsaraVideo VOD の再生 URL を指定できます。
break;
default:
}
}暗号化された VOD の再生
ApsaraVideo VOD は、HLS 暗号化、Alibaba Cloud 専用の暗号化、および DRM 暗号化をサポートしています。暗号化再生の詳細については、「Flutter で暗号化されたビデオを再生する」をご参照ください。
ライブストリーム再生
詳細については、「ApsaraVideo Player for Flutter」をご参照ください。
UrlSource は再生に URL を使用します。VidSts と VidAuth は再生にビデオ ID (VID) を使用します。
リージョンの設定方法の詳細については、「VOD リージョン」をご参照ください。
再生のコントロール
ApsaraVideo Player SDK for Flutter は、開始、一時停止、指定した時間へのシークなどの一般的な操作をサポートしています。
自動再生
setAutoPlay メソッドを使用して、ビデオの自動再生を有効にできます。自動再生はデフォルトで無効になっています。次のコードに例を示します。
fAliplayer.setAutoPlay(true);再生の準備
prepare メソッドを呼び出して、ビデオ再生のためのデータの読み取りと解析を開始できます。自動再生が有効になっている場合、データが解析された後にビデオの再生が自動的に開始されます。以下のコードは一例です。
fAliplayer.prepare();再生の開始
play メソッドを使用してビデオの再生を開始できます。次のコードに例を示します。
fAliplayer.play();特定の時間からの再生開始
seek メソッドを使用して、特定の時間にジャンプして再生できます。これは、プログレスバーのドラッグや特定のポイントからの再生再開などのシナリオで役立ちます。以下のコードは一例です。
// position はミリ秒単位の指定時間です。seekMode の有効値: FlutterAvpdef.ACCURATE (正確なシーク) および FlutterAvpdef.INACCURATE (不正確なシーク)。
fAliplayer.seek(position,seekMode);特定のポジションから再生を開始するには、prepare メソッドを呼び出す前に、このメソッドを一度呼び出す必要があります。以下のコードは一例です。
// 次のプレーヤー準備のための開始時刻をミリ秒単位で設定します。この設定は、直後の prepare 呼び出しに対してのみ有効です。
// prepare が呼び出されると、この値は自動的にゼロにリセットされます。次の prepare の前にこのメソッドが再度呼び出されない場合、再生は通常どおり開始されます。
// seekMode は正確または不正確モードに設定できます。
fAliplayer.setStartTime(time, seekMode);再生の一時停止
pause メソッドを使用してビデオの再生を一時停止できます。次のコードに例を示します。
fAliplayer.pause();再生の再開
play メソッドを使用してビデオの再生を再開できます。次のコードに例を示します。
fAliplayer.play(); // 再生を再開します。再生の停止
stop メソッドを使用してビデオの再生を停止できます。次のコードに例を示します。
fAliplayer.stop(); // 再生を停止します。プレーヤーの破棄
プレーヤーインスタンスを同期的または非同期的に破棄できます。以下のコードは一例です。
// 同期破棄。stop メソッドは内部で自動的に呼び出されます。
fAliplayer.destroy();
// 非同期破棄。stop メソッドは内部で自動的に呼び出されます。
fAliplayer.releaseAsync();同期破棄メソッドは、すべてのプレーヤーリソースが解放された後にのみ値を返します。UI に高い応答性が求められる場合は、非同期破棄メソッドの使用を推奨します。次の点にご注意ください:
非同期破棄中は、プレーヤーオブジェクトに対して他の操作を実行しないでください。
非同期破棄メソッドには非同期停止プロシージャが含まれているため、呼び出す前に手動でプレーヤーを停止する必要はありません。
プレーヤーステータスのリッスン
ApsaraVideo Player SDK for Flutter では、プレーヤーリスナーを設定してプレーヤーのステータスを監視できます。
プレーヤーリスナーの設定
プレーヤーには複数のリスナーを設定できます。
手動再生の場合、
OnPreparedリスナーを設定する必要があります。これは、再生を開始するためにOnPreparedコールバックで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) {});
// バッファーや現在の再生進捗など、プレーヤーのイベント情報に関するコールバック。情報は 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) {});再生ステータスのリッスン
プレーヤーのステータスの変更をリッスンできます。`onStateChanged` コールバックは、プレーヤーの現在のステータスを提供します。以下のコードは一例です。
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 は、フィル、回転、ミラーリングなどの表示設定をサポートしています。
塗りつぶし
SDK は、アスペクトフィット、アスペクトフィル、スケールトゥフィルの 3 つのフィルモードをサポートしています。setScalingMode メソッドを使用してフィルモードを設定できます。以下のコードは一例です。
// モードをアスペクトフィットに設定します。動画は歪みなくビュー内に収まるように比例的に縮小されます。
fAliplayer.setScalingMode(ScaleMode.SCALE_ASPECT_FIT);
// モードをアスペクトフィルに設定します。動画は歪みなくビューを埋めるように比例的に拡大されます。
fAliplayer.setScalingMode(ScaleMode.SCALE_ASPECT_FILL);
// モードをスケールトゥフィルに設定します。動画のアスペクト比がビューのアスペクト比と一致しない場合、動画が歪むことがあります。
fAliplayer.setScalingMode(ScaleMode.SCALE_TO_FILL);回転
setRotateMode メソッドを使用して、指定した角度でビデオを回転させることができます。回転を設定した後、回転角度を取得することもできます。以下のコードは一例です。
// 動画を時計回りに 0 度回転させます。
fAliplayer.setRotateMode(RotateMode.ROTATE_0);
// 動画を時計回りに 90 度回転させます。
fAliplayer.setRotateMode(RotateMode.ROTATE_90);
// 動画を時計回りに 180 度回転させます。
fAliplayer.setRotateMode(RotateMode.ROTATE_180);
// 動画を時計回りに 270 度回転させます。
fAliplayer.setRotateMode(RotateMode.ROTATE_270);
// 回転角度を取得します。
fAliplayer.getRotateMode();ミラーリング
SDK は、水平ミラーリング、垂直ミラーリング、およびミラーリングなしをサポートしています。setMirrorMode メソッドを呼び出して、ミラーモードを設定します。以下のコードは一例です。
// ミラーリングなしに設定します。
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_NONE);
// 水平ミラーリングに設定します。
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_HORIZONTAL);
// 垂直ミラーリングに設定します。
fAliplayer.setMirrorMode(MirrorMode.MIRROR_MODE_VERTICAL);再生情報の取得
ApsaraVideo Player SDK for Flutter を使用して、現在の再生進捗と動画の長さを取得できます。
現在の再生進捗の取得
`onInfo` コールバックから現在の再生時間をミリ秒単位で取得できます。以下のコードは一例です。
fAliplayer.setOnInfo((infoCode,extraValue,extraMsg,playerId){
if(infoCode==FlutterAvpdef.CURRENTPOSITION){
// extraValue は現在の再生進行状況です。
}
});動画の長さの取得
`AVPEventPrepareDone` イベントの後など、ビデオがロードされた後にビデオの総時間を取得できます。以下のコードは一例です。
fAliplayer.getMediaInfo().then((value){
// 合計動画再生時間を取得します。
_videoDuration=value['duration'];
});音量の設定
音量設定には、音量調整とミュートが含まれます。
音量調整
setVolume メソッドを使用して音量を調整できます。サポートされている値の範囲は 0 から 2 です。音量を 1 より大きい値に設定するとノイズが発生する可能性があるため、推奨されません。音量を設定した後、音量情報を取得することもできます。以下のコードは一例です。
// volume の値は 0 から 2 までの実数です。
fAliPlayer.setVolume(1);
// ボリューム情報を取得します。
fAliPlayer.getVolume();ミュート設定
setMute メソッドを使用して、再生中のビデオをミュートできます。以下のコードは一例です。
fAliplayer.setMute(true); // 再生中の動画をミュートにする再生速度の変更
ApsaraVideo Player SDK for Flutter では、ビデオの再生速度を変更できます。setSpeed メソッドを使用して、ビデオを通常の 0.5 倍から 5 倍の速度で再生できます。オーディオのピッチは変わりません。以下のコードは一例です。
// 再生速度を設定します。0.5 倍から 5 倍までの速度がサポートされています。速度は通常、0.5 倍、1 倍、1.5 倍など、0.5 の倍数で設定されます。
fAliplayer.setSpeed(1.0);マルチ解像度設定
VID ベースの方法 (VidAuth (推奨) または VidSts) を使用して再生する場合、追加の設定は必要ありません。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;
}
});
});
});定義の切り替え
selectTrack メソッドを使用して解像度を切り替えます。対応する TrackInfo のインデックスを渡します。
fAliplayer.selectTrack(trackIdx);解像度切り替え通知
このコールバックは、解像度の切り替えが成功した後にトリガーされます。
fAliplayer.setOnTrackChanged((value,playerId){
// コールバックは切り替えが成功したことを示します。切り替えが失敗した場合のメソッドはまだ利用できません。
});ループ再生
ApsaraVideo Player SDK for Flutter は、ループ再生機能を提供します。setLoop を呼び出してループ再生を有効にします。ビデオの再生が終了すると、自動的に最初から再開されます。以下のコードは一例です。
fAliplayer.setLoop(true); // ループ再生を有効にするループ開始コールバックは、onInfo を通じても通知を送信します。以下は一例です。
fAliplayer.setOnInfo((infoCode, extraValue, extraMsg, playerId) {
if(infoCode == FlutterAvpdef.LOOPINGSTART){
// ループ再生開始通知
}
});再生ログの取得
ApsaraVideo Player SDK for Flutter では、再生ログを取得できます。enableConsoleLog を呼び出してログ出力を有効にします。以下のコードは一例です。
// ログ出力を有効にします。
FlutterAliplayer.enableConsoleLog(true);
// ログレベルを設定します。デフォルトのレベルは AF_LOG_LEVEL_INFO です。問題をトラブルシューティングするには、AF_LOG_LEVEL_TRACE に設定できます。
FlutterAliplayer.setLogLevel(FlutterAvpdef.AF_LOG_LEVEL_INFO);ApsaraVideo Player SDK for Flutter では、フレームレベルのログを取得できます。`setLogOption` を呼び出して、フレームレベルのログ出力を設定します。以下のコードは一例です。
/// ログレベルを設定します。問題をトラブルシューティングするには、ログレベルを 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);フレームレベルのログ機能は、主にトラブルシューティングに使用されます。