ApsaraVideo VOD:クイックスタート

クイックスタートの例

この例では、ページにビデオプレーヤーを埋め込み、数行のコードでビデオ再生を実装する方法を示します。

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

void main() {
  // === 0. プレーヤーウィジェットのグローバル設定を初期化 ===
  // 任意：ウィジェットには推奨設定が含まれているため、通常は追加の構成は不要です。カスタム設定については、「Custom Configurations」ドキュメントをご参照ください。
  // AliPlayerWidgetGlobalSetting を使用してグローバル設定を適用します。
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: VideoPlayerPage());
  }
}

class VideoPlayerPage extends StatefulWidget {
  const VideoPlayerPage({super.key});

  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

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

  @override
  void initState() {
    super.initState();

    // === 1. コントローラーを作成し、データを構成 ===

    // ビデオソースを作成
    final videoSource = VideoSourceFactory.createVidAuthSource(
      vid: "<your-video-id>",
      playAuth: "<your-play-auth>",
    );

    // プレーヤーウィジェットのデータを構成
    final data = AliPlayerWidgetData(
      videoSource: videoSource,
      videoTitle: "<your-video-title>",
    );

    // プレーヤーウィジェットのコントローラーを初期化
    _controller = AliPlayerWidgetController();
    _controller.configure(data);
  }

  @override
  void dispose() {
    // === 3. ページが破棄される際は、リソースを解放する必要があります ===
    _controller.destroy();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AliPlayerWidget Demo')),
      // === 2. プレーヤー UI ウィジェットを埋め込み ===
      body: AliPlayerWidget(_controller),
    );
  }
}

主要な手順

1. コントローラーの作成とデータの構成

   • initState メソッドで、AliPlayerWidgetController インスタンスを作成します。

   • VideoSourceFactory を使用して videoSource を構築します。

   • AliPlayerWidgetData インスタンスを使用して、ビデオソースやタイトルなどの再生データをカプセル化します。

2. データのバインドと UI のレンダリング

   • _controller.configure(data) を呼び出してデータをバインドします。

   • build メソッドで、AliPlayerWidget(_controller) を使用してプレーヤー UI ウィジェットを埋め込みます。

3. リソースの解放：

   • dispose メソッドで _controller.destroy() を呼び出し、メモリリークを回避します。

その他のユースケース

この例では、ビデオオンデマンド向けの基本的な使用方法を示しています。ライブストリーミングやリスト再生など、より高度なユースケースについては、詳細なコードと手順が記載された aliplayer_widget_example サンプルプロジェクトをご参照ください。