Built in Plugins

Clappr has some built in plugins that allow you to customize the player.

You can check the description in clappr docs and bellow some examples on how to use it.

<template>
  <v-clappr-player
    ref="clappr"
    id="themed-player"
    source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    width="100%"
    :options="options"
    :aspect-ratio="16 / 9"
  />
</template>

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

export default {
  components: {
    VClapprPlayer
  },
  computed: {
    options () {
      return {
        mediacontrol: { // Media Control plugin
          seekbar: '#f39d52',
          buttons: 'green'
        },
        // Poster plugin
        poster: 'https://i.pinimg.com/originals/df/51/0f/df510f0dd46630f457df9f88d3379691.jpg',
        // Watermark plugin
        watermark: {
          url: "/logo.svg",
          link: "/",
          position: "bottom-right",
          opacity: 0.8,
          // Default behavior is "always-fixed", without "fixed" it will
          // nudge the whatermark when controls are visible and set it's z-index to 10000.
          // Values permited: "discrete", "discrete-fixed", "always", "always-fixed".
          // If the values don't match, it will fallback to "always-fixed".
          behavior: "discrete",
          // The delay and opacity for the watermark when in "discrete" behavior
          discreteDelay: 3000,
          discreteOpacity: 0.2,
          // The nudge in pixels when the behavior is not fixed.
          // This values are calculated according to the setted position.
          onControls: {
            x: 0,
            y: 48
          },
          // Nudge the watermark
          nudge: {
            y: 5,
            x: -24
          }
        }
        // Google Analytics plugin
        gaAccount: 'UA-XXXXXX-X', // Your token
        gaTrackerName: 'MyPlayerInstance'
      }
    }
  }
}
</script>
Copy

See how it looks

00:00

09:56

• Disabled

Show code