Thumbnails Plugin

name: "scrub-thumbnails"

Create a thumbnail preview strip on top of the seek bar.

repository: https://github.com/tjenkinson/clappr-thumbnails-plugin

fork: https://github.com/guzz/clappr-thumbnails-plugin

npm: https://www.npmjs.com/package/@guzzj/clappr-thumbnails-plugin

Usage

<template>
  <v-clappr-player
    ref="clappr"
    id="thumbnails-player"
    source="https://tjenkinson.me/clappr-thumbnails-plugin/assets/video.mp4"
    width="100%"
    :scrub-thumbnails="scrubThumbnails"
    :aspect-ratio="16 / 9"
  />
</template>

<script>
import VClapprPlayer from 'v-clappr-player'

export default {
  components: {
    VClapprPlayer
  },
  data: () => ({
    thumbs: []
  }),
  computed: {
    scrubThumbnails () {
      return {
        backdropHeight: 64, // set to 0 or null to disable backdrop
        spotlightHeight: 84, // set to 0 or null to disable spotlight
        backdropMinOpacity: 0.4, // optional
        backdropMaxOpacity: 1, // optional
        thumbs: this.thumbs
      }
    }
  },
  created () {
    for (let i=0; i<104; i++) {
      this.thumbs.push({
        url: 'https://tjenkinson.me/clappr-thumbnails-plugin/assets/thumbnails/thumb_'+(i+1)+'.jpg',
        time: 1 + (i*2)
      });
    }
  }
}
</script>
Copy

See it working

Using a sprite sheet for your thumbnails

A sprite sheet is a single image file with all images for your tumbnails concatenated in a matrix like the one below.

There are many ways to create a sprite sheet, see some options below:

• Node library
• Python script
• Generate online

Configuration

<template>
  <v-clappr-player
    ref="clappr"
    id="thumbnails-player"
    source="/highline.mp4"
    width="100%"
    :scrub-thumbnails="scrubThumbnails"
    :scrub-thumbnails-from-sprite="scrubThumbnailsFromSprite"
    :aspect-ratio="16 / 9"
  />
</template>

<script>
import VClapprPlayer from 'v-clappr-player'

export default {
  components: {
    VClapprPlayer
  },
  computed: {
    scrubThumbnails () {
      return {
        backdropHeight: 0, // set to 0 or null to disable backdrop
        spotlightHeight: 84, // set to 0 or null to disable spotlight
        backdropMinOpacity: 0.4, // optional
        backdropMaxOpacity: 1, // optional
        thumbs: []
      }
    },
    scrubThumbnailsFromSprite () {
      return {
        spriteSheetUrl: '/sprite.jpg',
        numThumbs: 36,
        thumbWidth: 284,
        thumbHeight: 160,
        numColumns: 6,
        timeInterval: 1
      }
    }
  }
}
</script>
Copy

See it working