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 no 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/…/preview-playlist/…/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. Every preview URL is signed and expiring, like the other playback links. What changes with visibility is how long it lasts: a public video's is minted to work for about 30 days, a private video's for 24 hours. Read the field again when you need a fresh one rather than storing it indefinitely. Fast clips behave the same as any other video here, even though a clip's preview plays partly from the video it was cut from.

Options to customize the reel (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>