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 endpoint:

1
"playbackIds": [
2
      {
3
        "id": "837f028b-dcaf-4c23-b368-3748641f74ac",
4
        "accessPolicy": "public",
5
        "accessRestrictions": {
6
          "domains": {
7
            "defaultPolicy": "allow",
8
            "allow": [],
9
            "deny": []
10
          },
11
        },
12
      }
13
  ]

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:

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

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

1
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.

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.

1
<script src="https://cdn.jsdelivr.net/npm/@fastpix/fp-player@<fp-player-version>/dist/player.js"></script>  
2
 
3
<fastpix-player  
4
    playback-id="{PLAYBACK_ID}"  
5
</fastpix-player> 

See how to use 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:

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.

1
<video id="video" controls autoplay muted></video> 
2
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> 
3
<script> 
4
  const video = document.getElementById("video"); 
5
  const src = "https://stream.fastpix.com/{playbackId}.m3u8"; 
6
 
7
  if (Hls.isSupported()) { 
8
    const hls = new Hls(); 
9
    hls.loadSource(src); 
10
    hls.attachMedia(video); 
11
  } else if (video.canPlayType("application/vnd.apple.mpegurl")) { 
12
    video.src = src; // Safari fallback 
13
  } 
14
</script> 

1
import Hls from "hls.js"; 
2
import { useEffect, useRef } from "react"; 
3
 
4
const HLSPlayer = ({ playbackId }) => { 
5
  const videoRef = useRef(); 
6
 
7
  useEffect(() => { 
8
    const video = videoRef.current; 
9
    const src = `https://stream.fastpix.com/${playbackId}.m3u8`; 
10
 
11
    if (Hls.isSupported()) { 
12
      const hls = new Hls(); 
13
      hls.loadSource(src); 
14
      hls.attachMedia(video); 
15
    } else if (video.canPlayType("application/vnd.apple.mpegurl")) { 
16
      video.src = src; 
17
    } 
18
  }, [playbackId]); 
19
 
20
  return <video ref={videoRef} controls autoPlay muted />; 
21
}; 

Shaka Player

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

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

1
import shaka from "shaka-player"; 
2
import { useEffect, useRef } from "react"; 
3
 
4
const ShakaPlayer = ({ playbackId }) => { 
5
  const videoRef = useRef(); 
6
 
7
  useEffect(() => { 
8
    shaka.polyfill.installAll(); 
9
    const player = new shaka.Player(videoRef.current); 
10
    player.load(`https://stream.fastpix.com/${playbackId}.m3u8`).catch(console.error); 
11
  }, [playbackId]); 
12
 
13
  return <video ref={videoRef} controls autoPlay muted />; 
14
};

Video.js

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

1
<!-- Include Video.js styles -->
2
<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
3
4
<!-- Video element -->
5
<video
6
  id="fastpix-video"
7
  class="video-js vjs-default-skin"
8
  controls
9
  autoplay
10
  muted
11
  width="640"
12
  height="360"
13
></video>
14
15
<!-- Include Video.js and HLS support -->
16
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
17
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hls.min.js"></script>
18
19
<script>
20
  document.addEventListener("DOMContentLoaded", function () {
21
    const playbackUrl = "https://stream.fastpix.com/{playbackId}.m3u8"; // Replace with actual playbackId
22
23
    const player = videojs("fastpix-video", {
24
      sources: [
25
        {
26
          src: playbackUrl,
27
          type: "application/x-mpegURL",
28
        },
29
      ],
30
    });
31
32
    player.ready(() => {
33
      console.log("Video.js player is ready");
34
    });
35
  });
36
</script>

1
import { useEffect, useRef } from "react";
2
import videojs from "video.js";
3
import "video.js/dist/video-js.css";
4
5
const VideoJSPlayer = ({ playbackId }) => {
6
  const videoRef = useRef(null);
7
  const playerRef = useRef(null);
8
9
  useEffect(() => {
10
    if (!playerRef.current) {
11
      const videoElement = videoRef.current;
12
13
      // Initialize the Video.js player
14
      playerRef.current = videojs(videoElement, {
15
        controls: true,
16
        autoplay: true,
17
        muted: true,
18
        responsive: true,
19
        fluid: true,
20
        sources: [
21
          {
22
            src: `https://stream.fastpix.com/${playbackId}.m3u8`,
23
            type: "application/x-mpegURL",
24
          },
25
        ],
26
      });
27
28
      playerRef.current.ready(() => {
29
        console.log("Video.js (React) is ready");
30
      });
31
    }
32
33
    return () => {
34
      if (playerRef.current) {
35
        playerRef.current.dispose();
36
        playerRef.current = null;
37
      }
38
    };
39
  }, [playbackId]);
40
41
  return (
42
    <div data-vjs-player>
43
      <video
44
        ref={videoRef}
45
        className="video-js vjs-default-skin"
46
        width="640"
47
        height="360"
48
      />
49
    </div>
50
  );
51
};
52
53
export default VideoJSPlayer;

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

Other popular players

Use the FastPix Player SDK (Optional but recommended)

For a better developer experience, we recommend using the FastPix Player SDK, which automatically handles:

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

NOTE

FastPix Video Data is built-in and automatically tracks video performance and engagement.

Here’s how to use it on the web:

1
import "@fastpix/fp-player";
2
3
4
const app = () => {
5
 
6
  return (
7
   <fastpix-player playback-id="PLAYBACK_ID" stream-type="on-demand"></fastpix-player>
8
  )
9
  
10
}
11
12
export default app

Refer to the player guide for more details on integrating with the FastPix video player. You can further customize your player interface and video playback experience as per your requirements.

After you have successfully implemented the integration, connect FastPix Video Data 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…

Go to your FastPix Dashboard > Video Data > Metrics or use the Video Data APIs 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 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

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 to generate actual clips from source files.

When to use this vs the Clipping API