Ch3rlO/v-clappr

👏🏻Vue.js wrapper for Clappr media player

V-Clappr 🎥

---

• Tiny Vue.js wrapper for Clappr

• This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you like it 🍻

• Demo here -> 💯 Codesandbox Link

Requirements

• Vue.js 2.x

Installation

npm install v-clappr
# or
yarn add v-clappr

CDN: UNPKG | jsDelivr (available as window.VClappr)

Usage

Register the component globally:

Vue.component('VClappr', require('v-clappr'));

Or use locally

import VClappr from 'v-clappr';

Example 1 (refer App.vue)

HTML

  <v-clappr
    el="player"
    :source="source"
    :options="options"
    @init="oninit"
    @ready="onready"
    @play="onplay"
    @pause="onpause"
    @stop="onstop"
    @ended="onended"
    @fullscreen="onfullscreen"
    @resize="onresize"
    @seek="onseek"
    @timeupdate="ontimeupdate"
    @volumeupdate="onvolumeupdate"
    @error="onerror"
  />

JS

import VClappr from 'v-clappr';

Vue.component('example-component', {
  components: {
    VClappr,
  },
  data: () => ({
    source:'https://your.site/yourfile.mp4',
    options: {
      poster: 'https://placehold.it/1000x1000',
      mute: false,
      autoplay: false,
      loop: false,
      disable_keyboard_shortcuts: false,
      disable_context_menu: true,
      mediacontrol: { seekbar: '#E113D3', buttons: '#66B2FF' },
      ga: {},
      watermark: {},
    },
    localclappr: null,
  }),
  methods: {
    oninit(clappr) {
      this.localclappr = clappr;
    },
    onready(event) {
      console.log('inside hook: onready', event);
    },
    onplay(event) {
      console.log('inside hook: onplay', event);
    },
    onpause(event) {
      console.log('inside hook: onpause', event);
    },
    onstop(event) {
      console.log('inside hook: onstop', event);
    },
    onended(event) {
      console.log('inside hook: onended', event);
    },
    onfullscreen(isBool) {
      console.log('player fullscreen?', isBool);
    },
    onresize(resize) {
      console.log('Resized object', resize);
    },
    onseek(time) {
      console.log('on seek, time in seconds:', time);
    },
    ontimeupdate(progress) {
      console.log('Progress of played video:', progress);
    },
    onvolumeupdate(volume) {
      console.log('Volume updated, current volume:', volume);
    },
    onerror(e) {
      console.log('le error:', e);
    },
  },
});

Example 2 (minimal)

HTML

  <v-clappr
    el="mycustomid"
    :source="source"
  />

JS

import VClappr from 'v-clappr';

Vue.component('example-component', {
  components: {
    VClappr,
  },
  data: () => ({
    source:'https://your.site/yourfile.mp4',
  }),
});

Props

Name	Type	Required?	Description
el	String	Yes	The id required for initializing Clappr
source	String	Yes	The URL of the video to be fed to Clappr
options	Object	No	Set of options provided to Clappr.Player() defaults: L24-L40

Events

Name	Description
ready	Emits an Object the Player instance
play	Emits an Object the Player instance
pause	Emits an Object the Player instance
stop	Emits an Object the Player instance
ended	Emits an Object the Player instance
fullscreen	Emits an Boolean value.
resize	Emits an Object with Player's current size
seek	Emits an Object current time in seconds
timeupdate	Emits an Object current & total time in seconds
volumeupdate	Emits an Number with current volume
error	Emits an Object with error event

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

v-clappr © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayak.pw · GitHub @vinayakkulkarni · Twitter @_vinayak_k