Video Preview

The Ravnur Media Player supports preview images that appear when users hover over the progress bar, making it easy to navigate to specific moments in the video.

Basic Preview

Add preview images to your video by providing a URL to an vtt file containing preview image information. The player will automatically display preview images when users hover over the progress bar.

Setup Code

const mediaSource = {
  id: 'thumbnails-demo',
  src: 'https://example.com/video.m3u8',
  type: 'application/x-mpegURL',
  title: 'Video with Thumbnail Preview',
  preview: '/thumbnails.vtt'  // Path to WebVTT file with thumbnail info
};

player.setup(mediaSource);

Preview Image File Format

Preview images are provided as a WebVTT file that can reference either individual images or a sprite sheet containing multiple preview images arranged in a grid.

WebVTT Preview Image Format

The WebVTT file contains timing information and image references for each preview image.

WEBVTT

00:00:00.000 --> 00:00:05.000
/thumbnails/thumb-0.jpg

00:00:05.000 --> 00:00:10.000
/thumbnails/thumb-1.jpg

00:00:10.000 --> 00:00:15.000
/thumbnails/thumb-2.jpg

Sprite Sheet Preview Image Format

When using sprite sheets, preview images are arranged in a grid within a single image. The #xywh syntax defines the position and size of each preview image within the sprite.

WEBVTT

00:00:00.000 --> 00:00:05.000
/thumbnails/sprite.jpg#xywh=0,0,160,90

00:00:05.000 --> 00:00:10.000
/thumbnails/sprite.jpg#xywh=160,0,160,90

00:00:10.000 --> 00:00:15.000
/thumbnails/sprite.jpg#xywh=320,0,160,90

00:00:15.000 --> 00:00:20.000
/thumbnails/sprite.jpg#xywh=480,0,160,90

00:00:20.000 --> 00:00:25.000
/thumbnails/sprite.jpg#xywh=0,90,160,90

00:00:25.000 --> 00:00:30.000
/thumbnails/sprite.jpg#xywh=160,90,160,90