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

You don’t build these URLs yourself. Stream and artifact queries return them already resolved against the regional Chandler in thumbnailAssets. For grid or library views, request thumbnailAssets on the list query:

query LibraryPreviews {
  streamsConnection(page: { first: 50 }) {
    nodes {
      streamId
      playbackId
      name
      thumbnailAssets {
        posterUrl
        spriteJpgUrl
        spriteVttUrl
      }
    }
  }
  clips: storageArtifactsConnection(input: { kinds: [CLIP], first: 50, offset: 0 }) {
    nodes {
      hash
      playbackId
      title
      thumbnailAssets {
        posterUrl
        spriteJpgUrl
        spriteVttUrl
      }
    }
  }
  recordings: storageArtifactsConnection(input: { kinds: [DVR], first: 50, offset: 0 }) {
    nodes {
      hash
      playbackId
      title
      thumbnailAssets {
        posterUrl
        spriteJpgUrl
        spriteVttUrl
      }
    }
  }
  vod: storageArtifactsConnection(input: { kinds: [VOD, CHAPTER], first: 50, offset: 0 }) {
    nodes {
      hash
      playbackId
      title
      thumbnailAssets {
        posterUrl
        spriteJpgUrl
        spriteVttUrl
      }
    }
  }
}

thumbnailAssets is null for a live stream that has never been live, and for an artifact until its thumbnail upload is confirmed.

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 the posterUrl your query returned as thumbnailUrl:

<Player
  contentType="live"
  contentId="<YOUR_PLAYBACK_ID>"
  thumbnailUrl={stream.thumbnailAssets?.posterUrl}
/>

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