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

Player	Format Support	Platform Focus	Notes
Plyr	HLS (via HLS.js)	Web (Modern UI)	Lightweight, modern UI, customizable.
JW Player	Native	Commercial/Enterprise Web	Paid license, analytics, and DRM ready.
THEOplayer	Native + HLS.js	Enterprise / Broadcast	Robust enterprise-grade player.
Bitmovin Player	HLS, DASH, CMAF	Enterprise / Multi-Platform	Advanced analytics and monetization tools.
ExoPlayer	HLS (native)	Android	Great for mobile HLS streaming.
AVPlayer	HLS (native)	iOS/macOS	Apple-native solution.

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.