Flutter 向けショートドラマソリューションでは、UI 統合型のコンポーネントである AliPlayerWidget を使用します。
概要
AliPlayerWidget は、ApsaraVideo Player SDK (flutter_aliplayer) をベースに構築された、Flutter アプリケーション向けの高性能な動画再生コンポーネントです。 動画オンデマンド (VOD)、ライブストリーミング、リスト再生、ミニドラマなど、さまざまな再生シナリオをサポートしています。 豊富な機能セットと柔軟な UI カスタマイズにより、教育、エンターテイメント、e コマース、ミニドラマなど、さまざまなアプリケーションに最適です。 詳細については、「Flutter プレーヤー UI 統合ソリューション」をご参照ください。
aliplayer_widget_example は、aliplayer_widget Flutter ライブラリを使用して構築されたサンプルプロジェクトです。このプロジェクトは、開発者が実際のプロジェクトで AliPlayerWidget を統合して使用する方法を迅速に理解するのに役立ちます。このプロジェクトでは、ショートビデオのリスト再生を設定して使用する方法を説明します。
動作環境
カテゴリ | 説明 |
Flutter バージョン | 2.10.0 以降。3.22.2 の使用を推奨します。 |
JDK バージョン | JDK 11 を使用します。 説明 JDK のバージョンを 11 に設定するには、[Preferences] > [Build, Execution, Deployment] > [Build Tools] > [Gradle] > [Gradle JDK] に移動し、[11] を選択します。バージョン 11 が利用できない場合は、Android Studio をアップグレードしてください。 |
Android バージョン | Android 6.0 以降。Gradle 7.0 以降。 |
iOS バージョン | iOS 10.0 以降。 |
携帯電話のチップ | アーキテクチャ：armeabi-v7a または arm64-v8a。 |
開発ツール | Android Studio または Visual Studio Code を使用します。 |
前提条件
Player SDK ライセンスとそのライセンスキーを取得している必要があります。アプリケーションにライセンスをバインドする手順については、「ライセンスのバインド」をご参照ください。
ApsaraVideo VOD コンソールで、左側メニューで [SDK Management] > [My Authorizations] の順に移動します。[License Management] タブで、ライセンスキーをコピーし、[Download Certificate] をクリックしてライセンスファイルをダウンロードします。
デモを試す
デモのダウンロード
aliplayer_widget はオープンソースで、ダウンロードが可能です。コンポーネントをカスタマイズするには、ソースコードを取得して変更できます。完全なソースコードは、以下のいずれかの方法で入手できます：
ダウンロード方法 | ダウンロードリンク |
Pub ソース |
説明 パッケージ管理ツールを使用して aliplayer_widget を統合することを推奨します。 |
GitHub | |
ソースコードパッケージ |
ダウンロードしたパッケージには以下が含まれます：
コアコンポーネント：
AliPlayerWidgetとAliPlayerWidgetControllerの完全な実装。サンプルプロジェクト：
aliplayer_widget_exampleは、VOD、ライブストリーミング、リスト再生などのシナリオのコードサンプルを提供し、コンポーネントの迅速な統合と使用を支援します。ドキュメントとコメント：ソースコードには、カスタム開発のための詳細なコメントと開発ガイドが含まれています。
統合
手動での依存関係の追加
pubspec.yaml ファイルに以下の依存関係を追加します：
dependencies:
aliplayer_widget: ^x.y.z注意：x.y.z は aliplayer_widget のバージョン番号を表します。Pub.dev 公式ページで最新の安定バージョンを確認し、x.y.z を実際のバージョン番号 (例：^7.0.0) に置き換えてください。
コマンドラインツールの使用
コマンドラインを使用する場合は、以下のコマンドを実行して依存関係を追加します：
flutter pub add aliplayer_widgetこのコマンドは、pubspec.yaml ファイルを自動的に更新します。
依存関係を追加した後、ターミナルで以下のコマンドを実行してインストールします：
flutter pub getこれらのステップを完了すると、AliPlayerWidget がプロジェクトに統合されます。これで使用を開始できます。
プロジェクトのコンパイルと実行
コマンドラインからの実行
リポジトリのクローン
まず、
aliplayer_widget_exampleリポジトリをローカルマシンにクローンします：cd aliplayer_widget_example依存関係のインストール
以下のコマンドを実行して、プロジェクトに必要な依存関係をインストールします：
flutter pub getプロジェクトのコンパイル
Android プロジェクトのコンパイル
Android プロジェクトをコンパイルするには、以下の手順を実行します：
Android SDK と Gradle がインストールされていることを確認します。
以下のコマンドを実行して APK ファイルを生成します：
flutter build apkコンパイルが完了すると、APK ファイルは
build/app/outputs/flutter-apk/app-release.apkに配置されます。
iOS プロジェクトのコンパイル
iOS プロジェクトをコンパイルするには、以下の手順を実行します：
Xcode と CocoaPods がインストールされていることを確認します。
CocoaPods の依存関係を初期化します：
cd ios && pod install && cd ..以下のコマンドを実行して、iOS アプリケーションパッケージ (IPA) ファイルを生成します：
flutter build ipaコンパイルが完了すると、IPA ファイルは
build/ios/ipa/Runner.ipaに配置されます。
サンプルの実行
Android サンプルの実行
flutter run lib/main.dartiOS サンプルの実行
cd ios && pod install && cd ..//最初に pod install を実行します。 flutter run lib/main.dart
IDE からの実行
Android Studio の使用
プロジェクトを開く
Android Studio を起動します。
[既存のプロジェクトを開く]を選択し、クローンしたaliplayer_widget_exampleディレクトリを開きます。依存関係のインストール
Android Studio では、
pubspec.yamlファイルをクリックし、次に右上隅にあるPub Getボタンをクリックして依存関係をインストールします。デバイスの設定
Android の物理デバイスが接続されていることを確認します。
アプリケーションの実行
ツールバーにある緑色の実行ボタン（
Run）をクリックし、ターゲットデバイスを選択してアプリケーションを起動します。
VS Code の使用
プロジェクトを開く
VS Code を起動します。
[File -> Open Folder]を選択して、クローンしたaliplayer_widget_exampleディレクトリを開きます。依存関係のインストール
ターミナル (
Ctrl + ~) を開き、以下のコマンドを実行して依存関係をインストールします：flutter pub getデバイスの設定
Android または iOS の物理デバイスが接続されていることを確認します。VS Code の左下隅にあるデバイスセレクターを使用して、ターゲットデバイスを選択します。
アプリケーションの実行
F5キーを押すか、左側の Activity Bar にある[実行とデバッグ]アイコンをクリックします。[Flutter]構成を選択し、デバッグセッションを開始します。
Xcode の使用 (iOS のみ)
プロジェクトを開く
iosディレクトリに移動し、Runner.xcworkspaceファイルをダブルクリックして Xcode でプロジェクトを開きます。CocoaPods の依存関係のインストール
CocoaPods の依存関係がインストールされていない場合は、ターミナルで以下のコマンドを実行します：
cd ios && pod install && cd ..署名の設定
Xcode で、
[Runner]プロジェクトを選択し、[署名と機能]タブに移動して、有効な開発者アカウントと署名証明書を設定します。アプリケーションの実行
Xcode ツールバーの実行ボタン (
▶️) をクリックし、ターゲットデバイスを選択してアプリケーションを起動します。
使用方法
ショートビデオのリスト再生 (ShortVideoPage)
このセクションでは、複数の AliPlayerWidget インスタンスをリストに埋め込むことでリスト再生を実現する方法について説明します。以下にサンプルを示します。
@override
void initState() {
super.initState();
_pageController = PageController();
_loadVideoInfoList();
_pageController.addListener(_onPageChanged);
}
Widget build(BuildContext context) {
return Scaffold(
body: PageView.builder(
controller: _pageController,
itemCount: videoInfoList.length,
itemBuilder: (context, index) {
final videoInfo = videoInfoList[index];
return ShortVideoItem(videoInfo: videoInfo);
},
),
);
}結果：現在のページには、各リスト項目に個別のプレーヤーインスタンスを含むビデオリストが表示されます。ユーザーはスワイプしてビデオを切り替え、ジェスチャーで操作できます。
ミニドラマシナリオ向けのさらなる最適化ソリューションについては、aliplayer_widget_example サンプルプロジェクトの具体的な実装をご参照ください。
主な機能
このコンポーネントは、ApsaraVideo Player SDK を使用して、プリロード (MediaLoader) とプリレンダリングを組み合わせた複数のプレーヤーインスタンス (AliPlayer) を実装しています。プリロード、プリレンダリング、HTTPDNS、暗号化再生などのコア機能を組み合わせることで、再生のレイテンシ、安定性、セキュリティを向上させます。
プリロード
スライディングウィンドウ戦略により、ビデオのプリロードタスクを動的に開始および停止します。基盤となる SDK は、ネットワーク状態に基づいてタスクの優先順位をインテリジェントに調整し、現在再生中および次に再生予定のビデオにネットワークリソースを優先的に割り当てます。これにより、ファーストフレームの読み込み速度が大幅に向上し、再生のコマ落ちが軽減されます。ビデオを素早くスワイプしても、スムーズな再生を楽しむことができます。詳細については、「プリロード」をご参照ください。
プリレンダリング
プリレンダリングは、後続のビデオのファーストフレームをバックグラウンドでレンダリングすることで、黒い画面を減らし、再生をよりスムーズにします。ApsaraVideo SDK for MediaBox および Player SDK は、バージョン 6.16.0 以降、強制プリレンダリング機能をサポートしています。詳細については、「プリレンダリング」をご参照ください。
HTTPDNS
HTTPDNS は、より高速で安定した DNS 解決サービスを提供します。従来の DNS 解決を置き換えることで、DNS 解決時間を短縮し、ビデオ再生の読み込み速度と安定性を向上させ、ユーザーの視聴体験を強化します。Audio and Video Client SDK および Player SDK のバージョン 6.12.0 以降では、HTTPDNS を手動で有効にする必要はありません。詳細については、「HTTPDNS」をご参照ください。
ビデオ暗号化
ショートドラマシナリオのビデオは、通常 1～3 分の MP4 ファイルです。ApsaraVideo SDK for MediaBox および ApsaraVideo Player SDK は、バージョン 6.8.0 以降、MP4 ファイルのプライベート暗号化をサポートしており、ショートドラマのビデオコンテンツを保護します。詳細については、「Alibaba Cloudビデオ暗号化 (プライベート暗号化)」をご参照ください。
プライベート暗号化された MP4 ビデオを再生するには、次の条件を満たす必要があります。
プライベート暗号化された MP4 ビデオの URL をプレーヤーに渡す場合、クエリパラメーター
etavirp_nuyila=1を付加する必要があります。たとえば、元のビデオ URL がhttps://example.aliyundoc.com/test.mp4の場合、プレーヤーに渡す URL はhttps://example.aliyundoc.com/test.mp4?etavirp_nuyila=1にする必要があります。アプリケーションのライセンスに関連付けられた UID が、プライベート暗号化された MP4 ファイルの生成に使用された UID と一致している必要があります。
プライベート暗号化されたビデオの構成を検証するには、次の点を確認してください。
動画のメタデータには
AliyunPrivateKeyUriタグが含まれている必要があります。ビデオが
ffplayで直接再生できないこと。
H.265アダプティブ再生
H.265 ストリームのハードウェアデコードに失敗した場合、プレーヤーは H.264 フォールバックストリームが構成されていれば自動的にそれに切り替えます。H.264 フォールバックが利用できない場合は、自動的に H.265 ソフトウェアデコードに切り替わります。詳細については、「H.265アダプティブ再生」をご参照ください。
アダプティブビットレートストリーミング (ABR)
ApsaraVideo Player SDK は、マルチビットレートアダプティブ HLS および DASH ビデオストリームをサポートします。プレーヤーの selectTrack メソッドを呼び出してビットレートを切り替えることで、ネットワーク適応型切り替えを実装できます。詳細については、「ネットワーク適応型切り替え」をご参照ください。
よくある質問
ApsaraVideo Player SDK に関するよくある質問やトラブルシューティングについては、「プレーヤー FAQ」をご参照ください。