Skip to main content
Skip table of contents

Thumbnail previews

To test this feature and view the example code, please see the Apple (FPS) SDK 5 Example Code Quick Start guide.

Thumbnails show users a preview of where in the stream a seek will take them. The CONNECT Player SDK supports WebVTT and I-Frame formats.

Presenting thumbnails to the user

Design/Layout (iPhone/iPad)

Your application’s storyboard must accommodate the placement of a thumbnail image in the desired location. For example, a UIView whose horizontal position can be adjusted to reflect the destination of the potential seek position. The thumbnails example application has this already set up in the main.storyboard file.

Event Handling

iPhone/iPad

To react to touch-related seeking events, the sliderTouchDown(), timeSliderDidChange() and sliderTouchUp() methods are implemented to respond to the seeking start and seeking stop changes respectively. These methods allow your application to hide, show and update the position of the thumbnails as appropriate.

CODE
 // ViewController.swift
  @IBAction func timeSliderDidChange(_ sender: UISlider) {
    guard thumbnailsEnabled else {
      print("Thumbnails are disabled, not responding to slider change")
      return
    }

    alignThumbnail(sliderPosition: sender.value)
    updateThumbnail(toTime: sender.value)
  }

  @IBAction func sliderTouchDown(_ sender: UISlider) {
    seeking = true
    if thumbnailsEnabled {
      alignThumbnail(sliderPosition: sender.value)
      thumbnailView.isHidden = false
    }
  }

  @IBAction func sliderTouchUp(_ sender: UISlider) {
    seek(to: Double(sender.value))
    thumbnailView.isHidden = true
  }

Apple TV

UI events will be different on AppleTV, generally using UITapGestureRecognizer, UILongPressGestureRecognizer, or both, to capture the interaction with the remote. However, this is beyond the scope of this document.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.