ApsaraVideo VOD:Flutter プレーヤーと UI の統合

aliplayer_widget はオープンソースで、ダウンロードが可能です。コンポーネントをカスタマイズするには、ソースコードを取得して変更できます。完全なソースコードは、以下のいずれかの方法で入手できます：

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

• コアコンポーネント：AliPlayerWidget と AliPlayerWidgetController の完全な実装。

• サンプルプロジェクト：aliplayer_widget_example は、VOD、ライブストリーミング、リスト再生などのシナリオのコードサンプルを提供し、コンポーネントの迅速な統合と使用を支援します。

• ドキュメントとコメント：ソースコードには、カスタム開発のための詳細なコメントと開発ガイドが含まれています。

統合

手動での依存関係の追加

pubspec.yaml ファイルに以下の依存関係を追加します：

dependencies:
  aliplayer_widget: ^x.y.z

コマンドラインツールの使用

コマンドラインを使用する場合は、以下のコマンドを実行して依存関係を追加します：

flutter pub add aliplayer_widget

このコマンドは、pubspec.yaml ファイルを自動的に更新します。

依存関係を追加した後、ターミナルで以下のコマンドを実行してインストールします：

flutter pub get

これらのステップを完了すると、AliPlayerWidget がプロジェクトに統合されます。これで使用を開始できます。

ビデオの再生

以下の例は、ページにビデオプレーヤーを埋め込む方法を示しています。わずか数行のコードでビデオを再生できます。

import 'package:flutter/material.dart';
import 'package:aliplayer_widget/aliplayer_widget_lib.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerPage(),
    );
  }
}

class VideoPlayerPage extends StatefulWidget {
  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late AliPlayerWidgetController _controller;

  @override
  void initState() {
    super.initState();
    // プレーヤーコンポーネントのコントローラーを初期化します。
    _controller = AliPlayerWidgetController(context);
    // プレーヤーコンポーネントのデータを設定します。
    final data = AliPlayerWidgetData(
      videoUrl: "https://example.com/video.mp4", // 実際のビデオ URL に置き換えてください。
      coverUrl: "https://example.com/cover.jpg", // 実際のサムネイル URL に置き換えてください。
      videoTitle: "サンプルビデオ",
    );
    _controller.configure(data); // 自動再生を設定します。
  }

  @override
  void dispose() {
    // プレーヤーインスタンスを破棄し、リソースを解放します。
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AliPlayerWidget(
          _controller,
        ),
      ),
    );
  }
}

より多くのシナリオのサポート

上記の例は、VOD シナリオでの基本的な使用方法を示しています。ライブストリーミングやリスト再生など、より複雑なシナリオについては、サンプルプロジェクト aliplayer_widget_example をご参照ください。詳細なコードと手順が含まれています。

プロジェクトのコンパイルと実行

サンプルの説明

aliplayer_widget_example プロジェクトは、複数のシナリオをカバーしています。AliPlayerWidget のコア機能とその応用例を示しています。基本的な VOD 再生ページ、複雑なライブストリーミングページ、またはショートビデオのリスト再生ページが必要な場合でも、このサンプルプロジェクトはコンポーネントの統合と使用方法を迅速に学ぶのに役立ちます。必要に応じてプロジェクトをカスタマイズすることもできます。

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/sample-video.mp4",
    coverUrl: "https://example.com/sample-cover.jpg",
    videoTitle: "サンプルビデオのタイトル",
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AliPlayerWidget(_controller),
  );
}

@override
void initState() {
  super.initState();
  _controller = AliPlayerWidgetController(context);
  final data = AliPlayerWidgetData(
    videoUrl: "https://example.com/live-stream.m3u8",
    sceneType: SceneType.live,
  );
  _controller.configure(data);
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        Expanded(child: AliPlayerWidget(_controller)),
        _buildChatArea(),
        _buildMessageInput(),
      ],
    ),
  );
}

ショートビデオのリスト再生の使用方法については、「Flutter 向けミニドラマソリューションの統合」をご参照ください。

AliPlayerWidget

AliPlayerWidget は、Flutter アプリケーションにビデオを埋め込んで再生するためのコアプレーヤーコンポーネントです。

コンストラクタ

AliPlayerWidget(
  AliPlayerWidgetController controller, {
  Key? key,
  List<Widget> overlays = const [],
});

例

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

AliPlayerWidgetController

AliPlayerWidgetController は、プレーヤーコンポーネントのコアコントローラーです。プレーヤーコンポーネントの初期化、再生、破棄ロジックを管理するために使用されます。

メソッド

例

// プレーヤーコンポーネントのコントローラーを初期化します。
final controller = AliPlayerWidgetController(context);

// プレーヤーコンポーネントのデータを設定します。
AliPlayerWidgetData data = AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
);
controller.configure(data);

// プレーヤーを破棄します。
controller.destroy();

AliPlayerWidgetData

AliPlayerWidgetData は、プレーヤーコンポーネントに必要なデータモデルです。ビデオ URL、サムネイル、タイトルなどの情報が含まれます。

プロパティ

例

AliPlayerWidgetData(
  videoUrl: "https://example.com/video.mp4",
  coverUrl: "https://example.com/cover.jpg",
  videoTitle: "サンプルビデオ",
  sceneType: SceneType.vod,
);

SceneType プロパティ

以下は一例です：

_controller = AliPlayerWidgetController(context);
// プレーヤーコンポーネントのデータを設定します。
final data = AliPlayerWidgetData(
  sceneType: SceneType.vod
);
_controller.configure(data);

オーバーレイコンポーネント

overlays パラメーターを使用すると、「いいね」、「コメント」、「共有」ボタンなどのカスタム UI コンポーネントをプレーヤー上に簡単にオーバーレイできます。

AliPlayerWidget(
  _controller,
  overlays: [
    Positioned(
      right: 16,
      bottom: 80,
      child: Column(
        children: [
          IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
          IconButton(icon: Icon(Icons.comment), onPressed: () {}),
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
    ),
  ],
);

一般的な API 呼び出し

AliPlayerWidget は、プレーヤーの動作を直接制御できる一連の外部 API 呼び出しを提供します。これらの API 呼び出しは AliPlayerWidgetController を通じて公開され、再生コントロール、ステータス照会、データ更新などの機能をサポートします。以下は、一般的な外部 API 呼び出しとそのシナリオです：

設定と初期化

再生コントロール

再生プロパティの設定

その他の設定

スロットシステム

概要
AliPlayerWidget は、プレーヤーインターフェイスの詳細なカスタマイズをサポートする柔軟なスロットシステムを提供します。UI コンポーネントを自由に組み合わせたり置き換えたりして、ブランド化された、シナリオ固有の、またはミニマリストな再生エクスペリエンスを作成できます。

スロットタイプ
以下のコアインタラクティブエリアスロットが組み込まれています：

デフォルトインターフェイスの使用

スロットビルダーを設定しない場合、デフォルトで完全な UI が読み込まれます。これは標準的な再生シナリオに適しています。

Widget _buildPlayWidget() {
  return AliPlayerWidget(_controller);
}

特定のスロットのカスタマイズ

必要に応じて特定のコンポーネントをカスタマイズし、残りをデフォルトのままにすることで、メンテナンスコストを削減できます。

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => MyAppTopBar(title: 'マイビデオ'),
    SlotType.bottomBar: (context) => MyCustomControls(),
  },
)

すべてのスロットのカスタマイズ

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: (context) => CustomTop(),
    SlotType.bottomBar: (context) => CustomBottom(),
    SlotType.playControl: (context) => GestureHandler(),
    SlotType.coverImage: (context) => BrandCover(),
    SlotType.playState: (context) => ErrorOverlay(),
    SlotType.centerDisplay: (context) => VolumeIndicator(),
    SlotType.seekThumbnail: (context) => PreviewThumb(),
    SlotType.subtitle: (context) => SubtitleView(),
    SlotType.settingMenu: (context) => MySettings(),
    SlotType.overlays: (context) => [AdBanner(), Watermark()],
  },
)

特定のスロットの非表示

スロットの値を null に設定すると、対応するエリアが非表示になります。

AliPlayerWidget(
  controller,
  slotBuilders: {
    SlotType.topBar: null,        // トップバーを非表示にします。
    SlotType.settingMenu: null,   // 設定メニューを非表示にします。
    SlotType.centerDisplay: null, // ジェスチャーフィードバックプロンプトを無効にします。
  },
)

以下は完全な例です：

// よりクリーンなインターフェイスのためにトップバーとボトムバーを非表示にします。
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: null,
  SlotType.bottomBar: null,
});

// カスタムのビジネスオーバーレイを追加します。
AliPlayerWidget(controller, slotBuilders: {
  SlotType.overlays: (context) => MyLikeShareButtons(),
});

// 完全にブランド化されたユーザーインターフェイスを作成します。
AliPlayerWidget(controller, slotBuilders: {
  SlotType.topBar: (context) => MyAppTopBar(),
  SlotType.bottomBar: (context) => MyAppBottomBar(),
  SlotType.settingMenu: null, // 設定を非表示にします。
});

マルチシナリオ適応

VOD、ライブストリーミング、リスト再生、全画面再生など、複数のシナリオをサポートします。

豊富な機能セット

• 基本機能：再生コントロール、設定パネル、サムネイル表示、解像度切り替えなどのコア機能を提供し、標準的なビデオ再生要件を満たします。

• ジェスチャーコントロール：輝度、音量、再生プログレスのジェスチャーコントロールをサポートし、直感的で便利なユーザーエクスペリエンスを提供します。

柔軟な UI カスタマイズ

• オーバーレイサポート：カスタムオーバーレイコンポーネントをサポートし、高い拡張性を提供します。これにより、広告やライブコメントなどの複雑な機能の実装が可能になります。

• モジュール設計：トップバー、ボトムバー、設定パネルなど、再利用可能な UI コンポーネントを組み込みで提供し、カスタム開発を容易にします。

• 全画面適応：横向きと縦向きモードの切り替えに自動的に適応し、さまざまなデバイスで最適な表示効果を保証します。

イベントとステータス管理

• リアルタイムステータス監視：再生ステータス、ビデオのディメンション、バッファプログレスのリアルタイムデータ更新を提供し、動的なインタラクションを容易にします。

• イベントコールバックメカニズム：再生開始、一時停止、完了のステータス管理を含む、プレーヤーの包括的なイベントリスナーを提供します。これにより、さまざまな再生シナリオの管理が容易になります。

• ログとデバッグのサポート：詳細なログシステムを提供し、トラブルシューティングとパフォーマンス最適化を容易にします。

使いやすさ

簡単な API 呼び出しを行うことで、複雑なビデオ再生機能を実装し、Flutter プロジェクトに迅速に統合できます。

柔軟性と拡張性

• モジュール設計により、さまざまなカスタムオプションをサポートし、カスタム開発を容易にします。

• さまざまな画面サイズと解像度に自動的に適応し、一貫したユーザーエクスペリエンスを保証します。

高性能と安定性

• ApsaraVideo Player SDK 上に構築されており、低遅延で高安定性のビデオ再生エクスペリエンスを提供します。

• 最適化されたアーキテクチャ、軽量コンポーネント、非同期読み込み、イベント駆動モデルにより、効率的な操作とスムーズなユーザーエクスペリエンスを保証します。

クロスプラットフォームサポート

Flutter のクロスプラットフォーム機能を活用し、Android と iOS の両方をサポートすることで、両プラットフォーム向けの単一コードベース開発を可能にします。