Adding external thumbnail tracks

Thumbnail seeking is considered a must have for any video longer than a few minutes. It increases usability and the general quality of experience dramatically.

Setting thumbnails up is simple with the Bitmovin Player. Thumbnails are loaded into the timeline as a track. All you need to do is to tell the player the location of the thumbnail file:

import { Platform } from 'react-native';
import {
  SourceConfig,
  SourceType,
  SubtitleFormat,
} from 'bitmovin-player-react-native';

// Source config with an external subtitle track.
const config: SourceConfig = {
  url:
    Platform.OS === 'ios'
      ? 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
      : 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
  type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
  poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
  // External thumbnail track url to be added to this source.
  thumbnailTrack:
    'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/thumbnails/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.vtt',
};

Requirements

Adaptive Streaming relies on encoding your video into several groups of files (streams) at various resolutions, while thumbnails also need to be generated in the encoding process. The encoder creates a set of thumbnail images and combines them into a single image file (“Sprite”). For more information on encoding your videos, have a look at our Cloud Encoding Service.