このトピックでは、ApsaraVideo Player SDK for Flutter の基本機能 (再生制御、表示設定、音量と再生速度の調整、解像度の切り替えなど) について説明します。詳細については、「高度な機能」および「API リファレンス」をご参照ください。
データソース (DataSource) の設定
-
ApsaraVideo Player SDK for Flutter は、VidAuth (推奨)、VidSts、UrlSource、暗号化再生の 4 つの VOD 再生方式をサポートしています。
-
ApsaraVideo Player SDK for Flutter は、ライブストリーミング再生方式として UrlSource のみをサポートしています。
VOD 再生
VidAuth を使用した VOD 再生(推奨)
VidAuth を使用して VOD 動画を再生するには、vid に音声または動画 ID を設定し、playauth に再生認証情報を設定します。
-
音声または動画ファイルをアップロードした後、ApsaraVideo VOD コンソールで **[メディアライブラリ]** > **[音声/動画]** を選択するか、SearchMedia API を呼び出して、ID を取得できます。
-
再生認証情報は、**GetVideoPlayAuth** API を呼び出して取得できます。自己署名を避けるため、SDK を使用して再生認証情報を取得することを推奨します。この API の呼び出し例については、開発者ポータルをご参照ください。
ApsaraVideo VOD ユーザーは、この再生方法を使用することをお勧めします。 VidAuth は VidSts よりも安全で使いやすいです。 詳細については、「認証情報ベースの方式と 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 API を呼び出して認証情報を生成する必要があります。
playConfig: value);
});
}
}
VidSts を使用した VOD 再生
VidSts を使用して VOD ビデオを再生するには、VOD 再生認証情報の代わりに一時的な Security Token Service (STS) 認証情報を使用します。事前に STS トークンと一時的な AccessKey ペア (AccessKeyId と AccessKeySecret) を取得しておきます。詳細については、「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 API を呼び出して AccessKey ID を生成する必要があります。
accessKeySecret: "<yourAccessKeySecret>",// 必須。一時 AccessKey ペアの AccessKey Secret。STS の AssumeRole API を呼び出して AccessKey Secret を生成する必要があります。
securityToken: "<yourSecurityToken>",// 必須。STS トークン。STS の AssumeRole API を呼び出してトークンを生成する必要があります。
playConfig: value);
});
}
UrlSource を使用した VOD 再生
UrlSource を使用して VOD 動画を再生するには、setUrl に再生 URL を設定します。URL は、サードパーティの URL または ApsaraVideo VOD の再生 URL を使用できます。
Alibaba Cloud の再生 URL は、**GetPlayInfo** API を呼び出して取得できます。自己署名を避けるため、SDK を使用して再生 URL を取得することを推奨します。例については、開発者ポータルをご参照ください。
void onViewPlayerCreated(viewId) async {
// プレーヤーのレンダリングビューを設定します。
fAliplayer.setPlayerView(viewId);
// 再生ソースを設定します。
switch (_playMode) {
// UrlSource を使用した再生。
case ModeType.URL:
this.fAliplayer.setUrl("Playback URL"); // 必須。再生 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();
特定の時間から再生を開始
seekTo メソッドを使用して、特定の時間にシークします。これは、プログレスバーのドラッグや保存された位置から再生を再開する場合に便利です。例:
// position は指定された時間 (ミリ秒単位) です。seekMode には、FlutterAvpdef.ACCURATE (正確なシーク) と FlutterAvpdef.INACCURATE (不正確なシーク) があります。
fAliplayer.seekTo(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リスナーを設定する必要があります。これは、playメソッドをOnPreparedコールバック内で呼び出して再生を開始する必要があるためです。 -
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) {});
// プレーヤーイベント情報のコールバック (バッファや現在の再生進行状況など)。情報は `FlutterAvpdef.infoCode` に対応する `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) を使用して再生する場合、追加の設定は必要ありません。SDK は ApsaraVideo VOD から解像度リストを自動的に取得します。解像度を取得して切り替えることができます。この設定は 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);
フレームレベルのログ機能は、主にトラブルシューティングに使用されます。