Thumbnail Seeking with the Native SDKs

In this topic, you will learn about thumbnail seeking with the Brightcove Native SDKs.

Overview

Thumbnail seeking allows users to drag the playhead along the timeline and view thumbnails as a preview of the associated content. This gives users the ability to quickly navigate a video file and find the content that they are interested in.

Thumbnail seeking
When are images generated?

Brightcove generates the images dynamically on request. Any video ingested with Dynamic Delivery will have images generated on the first request. This ensures that images are not created for unused videos. Once generated, images are cached locally and on the CDN for repeat viewing, just like any other image.

What is the image frequency for a video?

Images are generated every 5 seconds for content < 1 hour, and every 10 seconds for content > 1 hour.

Requirements

The following requirements are needed for thumbnail seeking with the Brightcove Native SDKs:

This feature requires using the Playback API v2.

Device OS version

  • Android 6.0+
  • iOS 11.0+

Brightcove Native SDK version

  • Native SDK for Android 6.12.0+
  • Native SDK for iOS 6.7.4+

Getting started

This feature is available to anyone with a Brightcove Video Cloud account.

Make sure your videos are ingested for Dynamic Delivery.

Android Implementation

To use thumbnail seeking with the Native SDK for Android, follow these steps:

  1. In the build.gradle file, add the following Gradle dependency: 

    implementation "com.brightcove.player:android-thumbnail-plugin:6.13.0"

  2. In the MainActivity.java file, create an instance of the ThumbnailComponent. 

    ThumbnailComponent thumbnailComponent = new ThumbnailComponent(brightcoveVideoView);

  3. Setup the preview media controller. 

    thumbnailComponent.setupPreviewThumbnailController();
  4. For a complete code example, see the ThumbnailScrubberSampleApp

Additional steps for SSAI

There are additional steps if you are using Server-Side Ad Insertion (SSAI).

To use the Thumbnail plugin with the SSAI plugin, you need to account for offsets introduced by the stitched ads in the content.

  1. Return to your MainActivity.java file.
  2. Listen for the SSAIEventType.AD_DATA_READY event.
  3. Retrieve the SSAI Video’s timeline object.

  4. Create an instance of SSAIThumbnailDocumentCreatorWrapper with the following parameters:

    • A ThumbnailDocumentCreator. You can use the DefaultThumbnailDocumentCreator.
    • The SSAI Video’s timeline object.
    • Set the ThumbnailDocumentCreator to the ThumbnailPlugin.

  5. Here is a code example: 

    eventEmitter.once(AD_DATA_READY, event -> {
  Timeline timeline = event.getProperty(SSAIEvent.VMAP_TIMELINE, Timeline.class);
  ThumbnailDocumentCreator creator = new SSAIThumbnailDocumentCreatorWrapper(new   DefaultThumbnailDocumentCreator(), timeline);
  thumbnailComponent.setThumbnailDocumentCreator(creator);
});

iOS Implementation

To use thumbnail seeking with the Native SDK for iOS, follow these steps

  1. There is a new BCOVPlaybackController property that enables or disables thumbnail seeking for the playback controller. For details, see the Native SDK for iOS reference.

  2. The default value is YES. To disable thumbnail seeking, set the value to NO.

    /**
 * Enables or disables thumbnail seeking for this playback controller.
 *
 * Default value is YES
 */
@property (nonatomic, readwrite, assign) BOOL thumbnailScrubbingEnabled;

Limitations

There are a few limitations when using thumbnail seeking with the Native SDKs:

  • Thumbnail seeking is not supported with offline playback
  • When using the Native SDK for Android, thumbnail seeking is not available for remote asset videos.