快速开始-视频点播(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()，避免内存泄漏。

快速开始示例

关键步骤解析

更多场景支持