快速開始 - ApsaraVideo VOD

本文介紹如何快速接入AliPlayerKit Flutter端。

說明

在開始之前，請確保已按照整合準備完成環境配置和依賴添加。

快速開始樣本

以下是一個完整的樣本，展示如何在頁面中嵌入視頻播放器。只需幾行代碼即可完成視頻播放功能。

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

void main() {
  // === 0. 初始化播放器組件全域配置 ===
  // 可選調用：組件已內建推薦的最優全域配置，通常無需額外設定；如需自訂，可參考 「自訂配置」文檔
  // 調用方式：通過 [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),
    );
  }
}

關鍵步驟解析

建立控制器並配置資料
- 在 initState 方法中建立 AliPlayerWidgetController 執行個體。
- 通過 VideoSourceFactory 構建 videoSource 視頻源。
- 使用 AliPlayerWidgetData 執行個體，封裝播放資料（視頻源、標題等）。
綁定資料並渲染 UI
- 調用 _controller.configure(data) 完成資料繫結。
- 在 build 方法中使用 AliPlayerWidget(_controller) 嵌入播放器 UI 組件。
釋放資源：
- 在 dispose 方法中調用 _controller.destroy()，避免記憶體流失。

ApsaraVideo VOD：快速開始

快速開始樣本

關鍵步驟解析

更多情境支援