> 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 your videos

So you’ve uploaded your video to FastPix. Now what?

This guide walks you through everything you need to start playing your videos - whether you're building a web app, integrating into a mobile SDK, or need a direct HLS URL.

\


## Get the playback ID

Every video uploaded to FastPix is assigned a unique `mediaId`. To play the video, you’ll need its corresponding `playbackId`.

You can get the `playbackId` using the [Get Media by ID](/video-on-demand-api/manage-videos/get-media) endpoint:

\


**`Response Example`**

```json Response Example
"playbackIds": [
      {
        "id": "837f028b-dcaf-4c23-b368-3748641f74ac",
        "accessPolicy": "public",
        "accessRestrictions": {
          "domains": {
            "defaultPolicy": "allow",
            "allow": [],
            "deny": []
          },
        },
      }
  ]
```

\


## Construct the playback URL

FastPix supports HLS playback out of the box. Once you have the `playbackId`, you can build the video stream URL like this:

**`Example`**

```json Example
https://stream.fastpix.com/{PLAYBACK_ID}.m3u8
```

So if your `playbackId` is `837f028b-dcaf-4c23-b368-3748641f74ac`, your HLS URL becomes:

**`URL`**

```json URL
https://stream.fastpix.com/playback/837f028b-dcaf-4c23-b368-3748641f74ac.m3u8
```

This URL can be plugged into any HLS-compatible player (web, mobile, or smart TV).

\


To directly **stream your video on a browser**, you can also use the playback stream URL which is sharable. Simply preview your video by putting the playbackId on the stream URL.

**`Example`**

```Text Example
https://play.fastpix.com/?playbackId=837f028b-dcaf-4c23-b368-3748641f74ac
```

**Parameters** \


1. **resolution:**

* Specifies the exact output resolution (width × height) for a single rendition. \


* Use this parameter when you want the system to generate media stream at a specific, fixed clarity.

2. **max\_resolution:**

* The highest resolution allowed or generated for a media file.\

* Used to set the highest desired resolution.

  **Example:** If `max_resolution` = 1080p, the output renditions will not exceed 1920×1080, even if the source is 4K.

3. **min\_resolution:**

* The lowest resolution allowed or generated for a media file.\

* Used to ensure the lowest-quality fallback for poor bandwidth.

  **Example:** If `min_resolution` = 360p, the system always generate at least 640×360 or similar. \


4. **rendition\_order:**

   Defines the sequence in which multiple renditions appear.

   * When set to `asc`, renditions are listed from the lowest resolution to the highest resolution.

   * When set to `desc`, renditions are listed from the highest resolution to the lowest resolution.

   * When `min_resolution` and `max_resolution` are both specified, you can still use `rendition_order` to control whether the resulting renditions appear in ascending or descending order.

> **NOTE**
>
> You cannot use `resolution` together with `min_resolution` or `max_resolution` in the same request.

\


## FastPix Player integration with HTML

You can integrate uploaded videos in FastPix Player which is built-in with video data tracking to enhance your application’s media experience.

**`HTML`**

```html HTML
<script src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@<fp-player-version>/dist/player.js"></script>  
 
<fastpix-player  
    playback-id="{PLAYBACK_ID}"  
</fastpix-player> 
```

\


See [how to use iframe](/video-on-demand/embed-a-video-in-your-app#embed-with-an-iframe) to embed video.

\


### Use third-party players

FastPix supports adaptive HLS playback via .m3u8 URLs. These can be used in any video player that supports HLS including open source and commercial options.

\


**Your HLS stream URL**:

**`URL`**

```text URL
https://stream.fastpix.com/{playbackId}.m3u8
```

\


Below are integrations with popular players used in production.

\


#### HLS.js

**When to use**: You want full control over playback, and you're okay building your own UI.

\


**`HTML`**

```html HTML
<video id="video" controls autoplay muted></video> 
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> 
<script> 
  const video = document.getElementById("video"); 
  const src = "https://stream.fastpix.com/{playbackId}.m3u8"; 
 
  if (Hls.isSupported()) { 
    const hls = new Hls(); 
    hls.loadSource(src); 
    hls.attachMedia(video); 
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) { 
    video.src = src; // Safari fallback 
  } 
</script> 
```

**`React`**

```jsx React
import Hls from "hls.js"; 
import { useEffect, useRef } from "react"; 
 
const HLSPlayer = ({ playbackId }) => { 
  const videoRef = useRef(); 
 
  useEffect(() => { 
    const video = videoRef.current; 
    const src = `https://stream.fastpix.com/${playbackId}.m3u8`; 
 
    if (Hls.isSupported()) { 
      const hls = new Hls(); 
      hls.loadSource(src); 
      hls.attachMedia(video); 
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) { 
      video.src = src; 
    } 
  }, [playbackId]); 
 
  return <video ref={videoRef} controls autoPlay muted />; 
}; 
```

\


#### Shaka Player

**When to use**: You need DASH + HLS support, buffer management, or recovery logic.

\


```html
<video id="video" controls autoplay muted></video> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.6.0/shaka-player.compiled.min.js"></script> 
<script> 
  shaka.polyfill.installAll(); 
  const player = new shaka.Player(document.getElementById("video")); 
  player.load("https://stream.fastpix.com/{playbackId}.m3u8"); 
</script>
```

**`React`**

```jsx React
import shaka from "shaka-player"; 
import { useEffect, useRef } from "react"; 
 
const ShakaPlayer = ({ playbackId }) => { 
  const videoRef = useRef(); 
 
  useEffect(() => { 
    shaka.polyfill.installAll(); 
    const player = new shaka.Player(videoRef.current); 
    player.load(`https://stream.fastpix.com/${playbackId}.m3u8`).catch(console.error); 
  }, [playbackId]); 
 
  return <video ref={videoRef} controls autoPlay muted />; 
};
```

\


#### Video.js

**When to use**: You want a battle-tested open-source player with a customizable UI.

\


```html
<!-- Include Video.js styles -->
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />

<!-- Video element -->
<video
  id="fastpix-video"
  class="video-js vjs-default-skin"
  controls
  autoplay
  muted
  width="640"
  height="360"
></video>

<!-- Include Video.js and HLS support -->
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const playbackUrl = "https://stream.fastpix.com/{playbackId}.m3u8"; // Replace with actual playbackId

    const player = videojs("fastpix-video", {
      sources: [
        {
          src: playbackUrl,
          type: "application/x-mpegURL",
        },
      ],
    });

    player.ready(() => {
      console.log("Video.js player is ready");
    });
  });
</script>
```

**`React`**

```jsx React
import { useEffect, useRef } from "react";
import videojs from "video.js";
import "video.js/dist/video-js.css";

const VideoJSPlayer = ({ playbackId }) => {
  const videoRef = useRef(null);
  const playerRef = useRef(null);

  useEffect(() => {
    if (!playerRef.current) {
      const videoElement = videoRef.current;

      // Initialize the Video.js player
      playerRef.current = videojs(videoElement, {
        controls: true,
        autoplay: true,
        muted: true,
        responsive: true,
        fluid: true,
        sources: [
          {
            src: `https://stream.fastpix.com/${playbackId}.m3u8`,
            type: "application/x-mpegURL",
          },
        ],
      });

      playerRef.current.ready(() => {
        console.log("Video.js (React) is ready");
      });
    }

    return () => {
      if (playerRef.current) {
        playerRef.current.dispose();
        playerRef.current = null;
      }
    };
  }, [playbackId]);

  return (
    <div data-vjs-player>
      <video
        ref={videoRef}
        className="video-js vjs-default-skin"
        width="640"
        height="360"
      />
    </div>
  );
};

export default VideoJSPlayer;

```

\


You can also integrate hls.js for better cross-browser behavior if needed.

\


### Other popular players

| Player                                                                       | Format Support   | Platform Focus              | Notes                                      |
| ---------------------------------------------------------------------------- | ---------------- | --------------------------- | ------------------------------------------ |
| [Plyr](https://plyr.io/)                                                     | HLS (via HLS.js) | Web (Modern UI)             | Lightweight, modern UI, customizable.      |
| [JW Player](https://jwplayer.com/)                                           | Native           | Commercial/Enterprise Web   | Paid license, analytics, and DRM ready.    |
| [THEOplayer](https://www.theoplayer.com/test-your-stream-hls-dash-hesp)      | Native + HLS.js  | Enterprise / Broadcast      | Robust enterprise-grade player.            |
| [Bitmovin Player](https://bitmovin.com/)                                     | HLS, DASH, CMAF  | Enterprise / Multi-Platform | Advanced analytics and monetization tools. |
| [ExoPlayer](https://github.com/androidx/media)                               | HLS (native)     | Android                     | Great for mobile HLS streaming.            |
| [AVPlayer](https://developer.apple.com/documentation/avfoundation/avplayer/) | HLS (native)     | iOS/macOS                   | Apple-native solution.                     |

\
\


## Use the FastPix Player SDK (Optional but recommended)

For a better developer experience, we recommend using the [FastPix Player SDK](/web-player/install-the-fastpix-web-player), which automatically handles:

* Adaptive bitrate switching
* Buffering and error recovery
* Captions and audio tracks
* Custom branding and UI

\


> **NOTE**
>
> FastPix [Video Data](/video-data/overview) is built-in and automatically tracks video performance and engagement.

\


Here’s how to use it on the web:

```jsx
import "@fastpix/fp-player";


const app = () => {
 
  return (
   <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
  )
  
}

export default app
```

\


[Refer to the player guide](/web-player/install-the-fastpix-web-player)  for more details on integrating with the FastPix video player. You can further customize your [player interface](/web-player/adjust-player-layout-and-ui)  and video [playback experience](/web-player/autoplay-loop-and-mute)  as per your requirements.

After you have successfully implemented the integration, [connect FastPix Video Data](/video-data/monitors/the-fastpix-player)  with your player to monitor playback performance. Once videos start playing, FastPix Video Data automatically collects:

* Buffering rates
* Video startup and playback time
* Rendition switching
* Playback errors
* User device/browser/geo data
* [and a lot more...](/video-data/understand-data-definitions#/)

Go to your FastPix Dashboard > Video Data > Metrics or use the [Video Data APIs](/video-data-api/overview) to pull real-time insights.

\


## Add security (Optional)

If your video requires access control (For example: for paid content, internal tools, etc.), you can enable **Signed URLs** to add expiry and signature to your playback URLs.

Refer to the [Protect Videos guide](/video-security/secure-media-access-with-jwts) for setup instructions.

\
\


## Play specific segments

Not every highlight needs a new clip. Sometimes, you just want to show a segment of a video - without downloading, editing, or creating a new file.

FastPix now supports **instant VOD clipping** (segment playback) using just a URL. This lets you stream a portion of any video by simply appending start and end timestamps to the playback URL. The original asset remains unchanged - there’s no encoding, splicing, or new file creation involved.

It’s perfect for previews, highlights, and in-app playback customizations.

\


### How it works

Every FastPix video comes with a playback URL that looks like this:

`https://stream.fastpix.com/{PLAYBACK_ID}.m3u8`

You can extend this URL with query parameters to define where playback must start and/or stop - without modifying the underlying video file.

\


### Query parameters

| Parameter | Type    | Description                                     |
| --------- | ------- | ----------------------------------------------- |
| `start`   | Integer | Timestamp in seconds where playback must begin. |
| `end`     | Integer | Timestamp in seconds where playback must stop.  |

\


These parameters are optional and can be used independently or together.

**Rules**

* Both `start` and `end` are **optional**.
* If only `start` is provided → playback begins from that timestamp until the end of the video.
* If only `end` is provided → playback begins at 0 and stops at that timestamp.
* If both are provided → playback covers the selected segment.

\


#### Examples

Let’s say your playback ID is abc123. Here are some real URLs:

**1. Play from 20s until end:**

`https://stream.fastpix.com/abc123.m3u8?start=20`

**2. Play from beginning until 455s:**

`https://stream.fastpix.com/abc123.m3u8?end=455`

**3. Play only between 20s and 455s:**

`https://stream.fastpix.com/abc123.m3u8?start=20&end=455`

\


### Use cases

This is useful when you want to play a portion of a video, not republish it:

* Let viewers watch a teaser or highlight from a longer video.
* Link directly to a relevant section of a lecture or tutorial.
* Create instant previews without re-encoding.
* Build features like "Watch from this moment" or chapter previews without creating new files.

\


### A note on accuracy

Playback control happens at the **HLS segment level**. So the start and end times might not be exactly frame-accurate. This means playback may be off by a few seconds (typically 2–3s).

For example, this means a `start=20&end=60` might actually start at \~18s and end at \~63s.

If you need **precise trimming**, use the [Clipping API](/video-on-demand/clip-and-trim-videos) to generate actual clips from source files.

\


**When to use this vs the Clipping API**

| Feature                         | URL-based Segment Playback | Clipping API           |
| ------------------------------- | -------------------------- | ---------------------- |
| Editing the original video      | ❌ No                       | ✅ Yes                  |
| Creates a new media asset       | ❌ No                       | ✅ Yes                  |
| Useful for sharing previews     | ✅ Yes                      | ✅ Yes                  |
| Works instantly                 | ✅ Yes                      | ⚠️ Takes a few seconds |
| Precise start/end time          | ⚠️ Segment-level           | ✅ Frame-accurate       |
| Good for replays and highlights | ✅ Yes                      | ✅ Yes                  |