Thumbnails & Previews

FrameWorks generates preview assets for streams, DVR recordings, clips, and VOD: a high-resolution poster frame and a low-resolution sprite sheet with synchronized VTT cues. Both are served by Chandler, the regional static-asset cache, and are exposed in playback metadata so your own app can use the same assets as the FrameWorks player.

What you get

Asset	File	Purpose
Poster frame	`poster.jpg`	Full-resolution single-frame JPEG. Use as the click-to-play overlay.
Sprite sheet	`sprite.jpg`	Tiled grid (10×10) of low-resolution thumbnails across the timeline.
Sprite cues	`sprite.vtt`	WebVTT cues pointing into `sprite.jpg` via `#xywh=` fragment identifiers.

URL pattern

Assets are served from the regional Chandler host at:

https://{chandler-host}/assets/{assetId}/{file}

assetId is:

the stream ID for live streams,
the artifact hash for DVR recordings and clips.

Example URLs:

https://chandler.example.com/assets/abc123def456/poster.jpg
https://chandler.example.com/assets/abc123def456/sprite.jpg
https://chandler.example.com/assets/abc123def456/sprite.vtt

The Chandler hostname for your environment is returned by the GraphQL playback resolver — you don’t need to hardcode it.

For grid or library views, fetch the Chandler host once from streamingConfig, then combine it with the asset IDs returned by your list queries:

query LibraryPreviewInputs {
  streamingConfig {
    chandlerDomain
  }
  streamsConnection(page: { first: 50 }) {
    nodes {
      streamId
      playbackId
      name
    }
  }
  clipsConnection(page: { first: 50 }) {
    nodes {
      clipHash
      playbackId
      title
    }
  }
  dvrRecordingsConnection(page: { first: 50 }) {
    nodes {
      dvrHash
      playbackId
      title
    }
  }
  vodAssetsConnection(page: { first: 50 }) {
    nodes {
      artifactHash
      playbackId
      title
    }
  }
}

Use https://{chandlerDomain}/assets/{assetId}/poster.jpg, sprite.jpg, and sprite.vtt. assetId is streamId for live streams, clipHash for clips, dvrHash for DVR recordings, and artifactHash for VOD.

In the FrameWorks Player

Sprite hover-scrub is automatic. When the stream has thumbnail processing enabled, the player auto-detects the sprite track from MistServer metadata and shows tiles on the seek bar during hover. No configuration needed for live or VOD content.

To set the click-to-play poster overlay, pass thumbnailUrl:

<Player
  contentType="live"
  contentId="<YOUR_PLAYBACK_ID>"
  thumbnailUrl="https://chandler.example.com/assets/<assetId>/poster.jpg"
/>

By default the loading overlay shows the latest poster frame. Opt in to a one-shot sprite-tile preroll animation via options.animatePreroll (React/Svelte/vanilla) or the animate-preroll attribute (web component). Tiles are thumbnail-resolution, so the animation is intentionally off by default.

See Playback Advanced — Thumbnails for the full SDK reference.

In the GraphQL API

Resolve playback metadata for any playable asset and read the Chandler URLs from thumbnailAssets:

query PreviewAssets($contentId: String!) {
  resolveViewerEndpoint(contentId: $contentId) {
    metadata {
      thumbnailAssets {
        posterUrl
        spriteJpgUrl
        spriteVttUrl
        assetKey
      }
    }
  }
}

These URLs are pre-resolved against the regional Chandler — use them directly without further construction.

The single-asset resolver is best when you are about to play one item. For large library pages, use the list-query pattern above so you do not issue one playback-resolution request per card.

Agent tools

Agents can call resolve_playback_endpoint with the same playback ID, stream ID, or Relay ID they use for viewer playback. The result includes thumbnail_assets when poster and sprite previews are available:

{
  "thumbnail_assets": {
    "poster_url": "https://chandler.example.com/assets/abc123/poster.jpg",
    "sprite_jpg_url": "https://chandler.example.com/assets/abc123/sprite.jpg",
    "sprite_vtt_url": "https://chandler.example.com/assets/abc123/sprite.vtt",
    "asset_key": "abc123"
  }
}

Building your own hover-scrub UI

If you’re not using the FrameWorks Player, you can render hover-scrub previews yourself by parsing sprite.vtt. Each cue points into sprite.jpg with a #xywh=x,y,width,height fragment:

WEBVTT

00:00:00.000 --> 00:00:10.000
sprite.jpg#xywh=0,0,160,90

00:00:10.000 --> 00:00:20.000
sprite.jpg#xywh=160,0,160,90

For each timestamp, draw the matching tile from the sprite using a CSS background-position or a <canvas> blit.

Playback Advanced — Thumbnails

Player Embedding

Multistreaming