Skip to main content
Timeline hover previews, also called trick play, show a frame when the pointer rests on a point of the video timeline. The Gcore Player draws that frame from a storyboard tile.
Timeline hover preview on the Coffee Run player

​
Storyboard tiles

During transcoding, Gcore takes one screenshot from each video segment and combines the screenshots into a JPEG storyboard. Each screenshot is a tile used for a specific interval on the timeline. Storyboards are created automatically for all videos. This is the storyboard for the Blender Studio film Coffee Run:
Coffee Run storyboard

​
Adding timeline hover previews to players

The Gcore Player shows the tiles on its own. External players read the same tiles in one of two ways:

​
WebVTT via API

The Get video response includes two fields for the storyboard:
  • sprite: URL of the JPEG storyboard that contains the tiles
  • sprite_vtt: WebVTT data that maps video time ranges to tile coordinates in the storyboard
The response includes: GET https://api.gcore.com/streaming/videos/{video_id}/
The VTT field structure is:
  • Tile number: 17
  • Time range represented by the tile: 00:01:20,000 --> 00:01:25,000
  • Tile coordinates and size in the storyboard, in xywh format: xywh=200,84,100,42
Tiles are read from left to right, top to bottom. The image below highlights the 17th tile, which is the third tile from the left and the third from the top:
WebVTT format in API

​
Roku trick play via HLS

The Roku specification describes tiles embedded in an HLS manifest. Add the -img suffix to the master manifest URL to include tile information:
Where:
  • {client_id}: the account ID
  • {video_id}: identifier of the video or live stream
  • -img: optional suffix that adds tile information to the manifest
The -img suffix adds #EXT-X-IMAGE-STREAM-INF to the master manifest. That tag points to a tiles manifest that contains the storyboard URL, tile dimensions, layout, and the duration represented by each tile. A master manifest with the tile suffix:
The tiles manifest: