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.

Step 1: 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:

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

Step 2: 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:

https://stream.fastpix.io/{PLAYBACK_ID}.m3u8

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

https://stream.fastpix.io/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.io/?playbackId=837f028b-dcaf-4c23-b368-3748641f74ac

Step 3: 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.

<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 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.io/{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.

<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.io/{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> 

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.io/${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.

<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.io/{playbackId}.m3u8"); 
</script>

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.io/${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.

<!-- 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/[email protected]/dist/videojs-contrib-hls.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const playbackUrl = "https://stream.fastpix.io/{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>

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.io/${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

Step 4: 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

PLEASE NOTE

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

Here’s how to use it on the web:

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

Once you have successfully implemented the integration, connect FastPix Video Data with your player to monitor playback performance. Once videos start playing, FastPix Video Data will automatically collect:

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

Step 5: Add security (Optional)

If your video requires access control (e.g., 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.io/{PLAYBACK_ID}.m3u8

You can extend this URL with query parameters to define where playback should 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 will cover 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.io/abc123.m3u8?start=20

2. Play from beginning until 455s:

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

3. Play only between 20s and 455s:

https://stream.fastpix.io/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