ミニドラマソリューションの統合 - Flutter - ApsaraVideo VOD

Flutter 向けのミニドラマソリューションは、Flutter の UI 統合コンポーネントである AliPlayerWidget に基づいて構築されています。

概要

AliPlayerWidget は、Flutter アプリケーション向けに設計されたパフォーマンス専有型のビデオ再生コンポーネントであり、ApsaraVideo Player SDK (flutter_aliplayer) に基づいて構築されています。ビデオオンデマンド (VOD)、ライブストリーミング、リスト再生、ミニドラマなど、さまざまな再生シナリオをサポートしています。このコンポーネントは、豊富な機能と柔軟性の高い UI カスタマイズ機能を提供し、教育、エンターテインメント、e コマース、ミニドラマなどのさまざまなアプリケーションのニーズに対応します。詳細については、「UI 統合ソリューションを備えた Flutter プレーヤー」をご参照ください。

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 を選択します。JDK 11 が利用できない場合は、Android Studio をアップグレードしてください。
Android バージョン	Android 6.0 以降。Gradle 7.0 以降。
iOS バージョン	iOS 10.0 以降。
携帯電話プロセッサ	アーキテクチャ: armeabi-v7a または arm64-v8a。
開発ツール	Android Studio または Visual Studio Code の使用を推奨します。

前提条件

Professional Edition の Player SDK ライセンスを取得し、対応する権限付与ファイルと License Key を入手している必要があります。ライセンスのバインド方法の詳細については、「ライセンスのバインド」をご参照ください。

デモ体験

デモのダウンロード

aliplayer_widget はオープンソースであり、複数の方法でダウンロードできます。コンポーネントをカスタマイズする場合は、ソースコードの依存関係を使用してソースコードを取得し、変更できます。完全なソースコードは、次の方法で取得できます。

ダウンロードの説明	ダウンロードリンク
Pub ソース	公式 Pub ソース: pub.dev 中国ミラーソース: pub.flutter-io.cn 説明開発者は、パッケージ管理ツールを介して aliplayer_widget を統合することを推奨します
Pub ソース
GitHub	GitHub リポジトリ
ソースコードパッケージ	aliplayer_widget.zip

ダウンロードしたパッケージには以下が含まれます:

コアコンポーネント: 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 プロジェクトをコンパイルする場合は、次のサブステップを実行します:
1. Player SDK for Android と Gradle をインストールします。
2. 次のコマンドを実行して APK ファイルを生成します:
```
flutter build apk
```
3. Android プロジェクトをコンパイルします。コンパイル後、APK ファイルは build/app/outputs/flutter-apk/app-release.apk に配置されます。
iOS プロジェクトのコンパイル
iOS プロジェクトをコンパイルする場合は、次のサブステップを実行します:
1. Xcode と CocoaPods をインストールします。
2. CocoaPods の依存関係を初期化します:
```
cd ios && pod install && cd ..
```
3. 次のコマンドを実行して iOS アプリパッケージ (IPA ファイル) を生成します:
```
flutter build ipa
```
4. iOS プロジェクトをコンパイルします。コンパイル後、IPA ファイルは build/ios/ipa/Runner.ipa に配置されます。

デモを実行します。

Android 用のデモを実行します。
```
flutter run lib/main.dart
```

iOS 用のデモを実行します。

cd ios && pod install && cd ..//最初に pod install を実行します

flutter run lib/main.dart

IDE の使用

Android Studio の使用
1. プロジェクトを開きます。
  Android Studio を起動します。Open an Existing Project を選択し、クローンした aliplayer_widget_example ディレクトリに移動して開きます。
2. 依存関係をインストールします。
  Android Studio で、pubspec.yaml ファイルをクリックし、右上隅の Pub Get ボタンをクリックして依存関係をインストールします。
3. デバイスを構成します。
  Android デバイスが接続されていることを確認します。
4. アプリを実行します。
  ツールバーの緑色の Run ボタンをクリックし、ターゲットデバイスを選択してアプリを起動します。
Visual Studio Code の使用
1. プロジェクトを開きます:
  Visual Studio Code を起動します。File -> Open Folder を選択し、クローンした aliplayer_widget_example ディレクトリに移動して開きます。
2. 依存関係をインストールします:
  Ctrl + ~ を押してターミナルを開き、次のコマンドを実行して依存関係をインストールします:
```
flutter pub get
```
3. デバイスを構成します:
  Android または iOS の物理デバイスが接続されていることを確認します。Visual Studio Code の左下隅にあるデバイスセレクターを使用して、ターゲットデバイスを選択します。
4. アプリを実行します。
  F5 を押すか、左のアクティビティバーの Run and Debug アイコンをクリックし、Flutter 構成を選択してデバッグセッションを開始します。
Xcode の使用 (iOS のみ)
1. プロジェクトを開きます。
  ios ディレクトリに移動し、Runner.xcworkspace ファイルをダブルクリックして Xcode でプロジェクトを開きます。
2. CocoaPods の依存関係をインストールします。
  CocoaPods の依存関係がインストールされていない場合は、ターミナルで次のコマンドを実行します:
```
cd ios && pod install && cd ..
```
3. 署名を構成します。
  Xcode で Runner プロジェクトを選択し、Signing & Capabilities タブに移動して、有効な開発者アカウントと署名証明書を構成します。
4. アプリを実行します。
  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 を使用し、複数のプレーヤーインスタンス (AliPlayer)、プリロード (MediaLoader)、およびプリレンダリングで実装されています。プリロード、プリレンダリング、HTTPDNS、暗号化再生などのコア機能を活用して、再生の遅延、安定性、セキュリティを向上させ、より良い視聴体験を提供します。

プリロード

スライドウィンドウポリシーは、ビデオのプリロードタスクを動的に開始および停止します。基盤となる SDK レイヤーは、ネットワークステータスに基づいてタスクの優先度をインテリジェントに調整し、現在再生中または再生されようとしているビデオにより多くのネットワークリソースが割り当てられるようにします。これにより、インスタント再生率が向上し、再生のカクつきが減少し、ビデオをすばやくスワイプしてもスムーズな再生が可能になります。詳細については、「プリロード」をご参照ください。

プリレンダリング

プリレンダリングは、次のビデオの最初のフレームをバックグラウンドでレンダリングします。これにより、ブラックスクリーンが減少し、よりスムーズな再生が保証されます。Apsara Video SDK と ApsaraVideo Player SDK は、バージョン 6.16.0 以降、強制プリレンダリングをサポートしています。詳細については、「プリレンダリング」をご参照ください。

HTTPDNS

HTTPDNS は、より高速で安定したドメインネームシステム (DNS) 解決サービスを提供します。従来の DNS 解決を置き換えることで、HTTPDNS は DNS 解決時間を短縮し、ビデオ再生の読み込み速度と安定性を向上させ、ユーザーの視聴体験を向上させます。HTTPDNS は、Apsara Video SDK および ApsaraVideo Player SDK バージョン 6.12.0 以降でデフォルトで有効になっています。詳細については、「HTTPDNS」をご参照ください。

ビデオ暗号化

ミニドラマシナリオのビデオは通常、長さが 1〜3 分の MP4 ファイルです。これらのビデオにセキュリティを提供するために、Apsara Video SDK と 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

プレーヤー SDK は、HLS および DASH ビデオストリームのアダティブビットレートストリーミングをサポートしています。プレーヤーの selectTrack メソッドを呼び出して、現在再生中のストリームを切り替えることができます。これにより、ネットワーク適応型のビデオ品質切り替えを実装できます。詳細については、「ネットワーク適応型切り替え」をご参照ください。

よくある質問

ApsaraVideo Player SDK に関するよくある質問とトラブルシューティングのヒントの詳細については、「プレーヤーに関するよくある質問」をご参照ください。

概要