Skip to content

Hover Previews

Hover over any video's thumbnail in the dashboard's Videos list and, after a brief pause, a muted preview starts playing in place of the poster — a short reel of moments sampled from across the whole video, so you can recognize a video's content without opening it. Move the pointer away and the poster returns.

How it works

The preview is generated on the fly from the video's existing encoded segments:

  • Nothing extra is encoded, and nothing extra is stored — previews add zero storage or encoding cost to your videos.
  • The reel samples about ten evenly spaced moments across the video and plays about one segment (a few seconds) of each, using the smallest (240p) rendition to keep it light.
  • Previews are served through the CDN like regular playback, so repeated hovers are cheap and fast.
  • The preview only appears for videos that are ready to play; videos still encoding show their poster as usual.

Previews play muted (browsers require this for automatic playback) and loop until you move the pointer away.

Preview API

You can build the same experience in your own app. Every video object already carries a preview field — the URL of an HLS playlist that plays the preview reel in any HLS player (hls.js, Safari, ExoPlayer, AVPlayer, …). It comes back from both Get video and List videos, so there's no separate request to make:

{
  "id": "…",
  "title": "…",
  "preview": "https://…/c/pub/prvc/…/v1.n10.w0-100.s6000/<token>.m3u8",
  …
}

preview is null when a video can't be previewed — it's still uploading, or it's an audio-only upload with no video rendition.

Public vs private videos. A public video's preview URL is fixed, shareable and never expires (the access token is baked into the path, so it can't be guessed). A private video's is a signed URL that expires, like its other playback links.

The reel uses sensible defaults — about ten moments sampled across the whole video, one segment each. Options to customize it (length, per-stop duration, sampling window) will arrive in a later release. A minimal hls.js player:

<video id="preview" muted playsinline loop></video>
<script>
  const hls = new Hls();
  hls.loadSource(previewUrl); // the "preview" field from the video object
  hls.attachMedia(document.getElementById("preview"));
</script>