> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Play uploaded videos

> Learn how to play a FastPix video in your Flutter app using a playback ID.

Learn how to play a FastPix video in your Flutter app using a playback ID.

## Set up playback

Playing a video requires four steps: create a data source, define the player configuration, initialize the controller, and render the player widget.

### Create a data source

The data source tells the player what to play. Provide your `playbackId` and optional metadata:

```dart
final dataSource = FastPixPlayerDataSource.hls(
  playbackId: 'your-playback-id-here',
  title: 'Sample HLS Stream',
  description: 'A sample HLS stream from FastPix',
  thumbnailUrl: 'https://www.example.com/thumbnail.jpg',
);
```

### Define the player configuration

The configuration controls player behavior such as autoplay settings, quality preferences, and controls:

```dart
final configuration = FastPixPlayerConfiguration();
```

### Initialize the controller

Connect your data source and configuration to the player:

```dart
controller = FastPixPlayerController();
controller.initialize(dataSource: dataSource, configuration: configuration);
```

### Render the player widget

Use the `FastPixPlayer` widget in your layout. You can control width, height, and aspect ratio:

```dart
return FastPixPlayer(
  controller: controller,
  width: 350,
  height: 200,
  aspectRatio: FastPixAspectRatio.ratio16x9,
);
```

> **Important:** Always call `controller.dispose()` in your widget's `dispose()` method. Forgetting this can cause memory leaks, especially on Android.

## What's next

* [Play live and on-demand streams](/docs/flutter-player/play-live-and-on-demand-streams) to configure stream types.
* [Secure video playback](/docs/flutter-player/secure-video-playback) to protect content with tokens.
* [Control playback resolution](/docs/flutter-player/control-playback-resolution) to manage video quality.