Vue.js wrapper for Clappr media player

Vue.js wrapper for Clappr media player

Vue.js wrapper for Clappr media player Tiny Vue.js wrapper for ClapprThis 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

V-Clappr

Requirements

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: {
      width: 720,
      height: 480,
      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: {},
      plugins: [],
    },
    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-L79

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

Download Details:

Author: vinayakkulkarni

Live Demo: https://codesandbox.io/s/nr4op784ym?fontsize=14&module=/src/App.vue

GitHub: https://github.com/vinayakkulkarni/v-clappr

vuejs vue javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router