FRAMEWORKS
Astro video
Complete video infrastructure for an Astro site. Install the packages and you get uploads, adaptive playback, live streams, DRM, analytics and AI features, without building your own encoding, storage and delivery.
Free plan: 10 videos, 100K streaming minutes, 300 minutes of subtitles and moderation. No credit card.
TRUSTED BY PRODUCT TEAMS SHIPPING VIDEO AT SCALE
What you get
FastPix for Astro video
Four things you don't have to build or run yourself.
One video API
Upload, storage, delivery, the player, analytics and AI all come from the same API. No Vite plugin, nothing added to your build.
Built-in encoding
FastPix turns each upload into several quality levels and packages them for streaming. No FFmpeg, no queue workers.
Analytics already on
The player sends view data on its own. Add a title and a viewer ID and you can see who watched what.
Secure video streaming and DRM
Sign a token on your server and pass it to the player. Widevine, PlayReady and FairPlay are all supported.
Functionality
Every Astro video capability, from upload to AI
Pick a group, then a capability. Each one tells you whether the code goes in an API route, page frontmatter, or a script block that runs only in the browser.
Upload straight from .astro
A native component handles chunked, resumable uploads to a signed URL. It lives in your markup with no React island around it.
Drop the player in
The player is a web component, so it goes straight into .astro markup with no client: directive and no React or Vue wrapper. The import lives in a script block, which Astro only runs in the browser.
Analytics on a static site
The player reports startup time, buffering, quality and errors on its own — the only runtime signal a CDN-hosted Astro site gets.
Transcribe and translate
Generate captions in dozens of languages during encoding and attach them to the asset automatically.
Setup
Install and Configure Astro Video Package
Installation
The uploader is a native Astro component and the player is a web component, so neither needs React. Server routes need an adapter, because they run on demand rather than at build time.
Configuration
There's no API key. You get two values, an Access Token ID and a Secret Key, read through import.meta.env. The PUBLIC_ prefix is the whole rule here: anything carrying it ships to the browser.
Get your access tokenAn Astro project with all of it wired
The adapter config, the API route, the native uploader with its DOM events, and the player page, in one project you can clone and run. Everything in one place instead of four doc pages.
Behind the scenes
What happens after your Astro site uploads a file
Here's what happens between the file leaving the browser and the video reaching a viewer. None of it is code you write, and none of it happens at build time.
Native uploader
Chunked and resumable, from the browser to a signed URL.
Import from a URL
Or pass a public video URL and FastPix pulls it in.
Ingest, encode, package
No FFmpeg, no build step, nothing in your output directory.
video.media.ready
The webhook that tells your server the video is ready.
Adaptive playback
One playback ID into the player, on-demand or live.
Upload
From your Astro site
Process
FastPix handles this
Play
Webhook + playback ID
Your Astro site only touches the two ends. An API route hands over a signed URL and the page takes the playback ID. In between, a video.media.ready webhook tells your server the video is ready. Both routes need export const prerender = false, or Astro tries to run them during the build.
Tech specs
Every features for Astro video
Calculated metrics
Playback Success
Playback Success Score
Playback Failure Percentage
Exits Before Video Start
Video Startup Failure Percentage
Video Startup
Startup Score
Video Startup Time
Player Initialization Time
Page Load Time
Total Startup Time
Jump Latency
Stability (Buffering)
Stability Score
Buffer Ratio
Buffer Frequency
Buffer Fill
Buffer Count
Dropped Frame Count
Request Throughput
Render Quality
Render Quality Score
Avg Upscaling
Avg Downscaling
Max Upscaling
Max Downscaling
Average Bitrate
Live Stream Latency
Quality of Experience
Overall Experience Score (QoE)
Audience
Views
Unique Viewers
Playing Time
Dimensions and filters
Device
Browser
Browser Version
OS
OS Version
Device Name
Device Model
Device Type
Device Manufacturer
Player
Player Name
Player Version
Player Software Name
Player Software Version
Player Resolution
FastPix SDK
SDK Version
Autoplay
Preload
Remote Played
Video
Video Title
Video ID
Video Series
Playback ID
Media ID
Live Stream ID
Content Type
Source Stream Type
Source Type
Encoding Variant
Network
ASN
CDN
Source Hostname
Connection Type
View Session ID
Geography
Continent
Country
Region / State
View
Viewer ID
Error Code
Exit Before Video Start
Video Has Ad
Video Startup Failure
Page Context
Playback Failed
Experiments
Experiment Name
Sub Property ID
DRM Type
Custom
Up to 10 custom dimensions (custom_1 through custom_10)
Pass any product field
Playback events captured
Raw signal collected by the client SDK. The 18 events below are aggregated server-side into the metrics above.
playerReady
viewBegin
variantChanged
requestCompleted
play
playing
waiting
buffering
buffered
seeking
seeked
pulse
requestCanceled
error
pause
requestFailed
loadstart
viewCompleted
FAQ
Astro video questions, answered
How do I add video to an Astro site?
For a public video whose ID is known at build time, drop the player element into your markup and put its import in a <script> tag, which Astro only runs in the browser. That page stays fully static and CDN-served. You need a server only for uploads, webhooks and signed playback.
Does adding video break Astro's zero-JavaScript promise?
Only if you load the player on page load. Adaptive playback needs JavaScript in Chrome, Firefox and Edge, but most visitors never press play. Render a thumbnail with a play button and put the player behind a dynamic import(), and a visitor who does not click downloads none of it.
Why do I get 'Cannot use server-rendered pages without an adapter'?
Because the route is an API route, or has export const prerender = false, and Astro's default output is static files with no runtime. Install the adapter matching your deployment target and set it in astro.config.mjs.
Can I embed video on a static Astro page without an adapter?
Yes, if the playback ID is known at build time and the video is public. The player takes the ID and talks to the CDN directly, so no server is involved. An adapter is needed for minting upload URLs, receiving webhooks and signing tokens for private playback.
Go deeper
More on Astro video embedding and playback
Uploading large video files efficiently using chunking
The protocol detail behind chunk sizing and retry behaviour.
Read moreHow to allow users to upload large videos with pause and resume
The behaviour the uploader gives you, explained.
Read moreGuide to video playback in JavaScript
What the browser is doing underneath any player you pick.
Read moreABR vs MBR: adaptive and multi-bitrate streaming
Why one upload becomes several quality levels.
Read moreGuide to lazy loading HTML videos for your website
Stops a page of video elements blocking your first paint.
Read moreCreating a fully customizable video player interface
Restyling controls without rebuilding the player.
Read more