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.
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.
Updated 1 day ago