Current version: (AGNO-JavaScript API)

Configuration using json url

Url should return json data in spriteMetadata field format

// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
has_thumbnails: true,
thumbnailsPreview: {
  spriteImageUrl: 'https://image.mux.com/tJom4lV006o7AEpneE01fvpKqc02HaQjujJ/storyboard.png',
  spriteMetadataJsonUrl: 'https://image.mux.com/tJom4lV006o7AEpneE01fvpKqc02HaQjujJ/storyboard.json'
}

Configuration using metadata object

// required parameters:
brand: "agnoplay",
videoId: "Mbdskc9KsAii",
url: window.location.href,
...
// add the following:
has_thumbnails: true,
thumbnailsPreview: {
  spriteImageUrl: 'https://image.mux.com/tJom4lV006o7AEpneE01fvpKqc02HaQjujJ/storyboard.png',
  spriteMetadata: {
    "tile": {
      "width": 284,
      "height": 160
    },
    "tilePositions": [
      {
        "timeCode": 0,
        "x": 0,
        "y": 0
      },
      {
        "timeCode": 2.3244,
        "x": 284,
        "y": 0
      },
      // ...
      {
        "timeCode": 113.89559999999999,
        "x": 1136,
        "y": 1440
      }
    ]
  }
}

Thumbnails Preview

This example shows the possibility to show thumbnails for a video when the user hovers over the progressbar, assuming that they are available on the CDN in a readable format.