v-clappr

Vue.js wrapper for Clappr

Usage no npm install needed!

<script type="module">
  import vClappr from 'https://cdn.skypack.dev/v-clappr';
</script>

README

V-Clappr 🎥

GitHub Workflow Status GitHub Workflow Status GitHub release (latest SemVer) npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo LGTM Alerts LGTM Grade GitHub contributors FOSSA

eslint prettier rollup vue typescript

Features

  • Built with latest @clappr/core
  • Built from scratch using TypeScript
  • For Vue 2.x version – npm i v-clappr@2
  • For Vue 3.x version – npm i v-clappr@3

Demo

Edit VClappr Demo

Table of Contents

Requirements

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Installation

$ npm install v-clappr --save
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playback dash-shaka-playback --save
$ npm install @vue/composition-api --save-dev

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

Usage

Globally

As a component

import { VClappr } from 'v-clappr';
Vue.component('VClappr', VClappr);

As a plugin

import VClappr from 'v-clappr';
Vue.use(VClappr);

Locally

As a component

import { VClappr } from 'v-clappr';

Example(s)

Example 1 (w/ all options – 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: '100%',
      height: '100%',
      autoPlay: false,
      mute: false,
      loop: false,
      language: 'en-US',
      playbackNotSupportedMessage: 'Playback not supported',
      autoSeekFromUrl: true,
      includeResetStyle: true,
      playback: {
        preload: 'metadata',
        disableContextMenu: true,
        controls: false,
        crossOrigin: null,
        playInline: false,
        minimumDvrSize: null,
        externalTracks: [],
        hlsjsConfig: {},
        shakaConfiguration: {},
      },
      poster: 'https://picsum.photos/3840/2160',
    },
    clappr: null,
  }),
  methods: {
    oninit(clappr) {
      this.clappr = 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:'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
  }),
});

API

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 by Clappr defaults: L47-L69

Events

Name Description
ready Emits an Object the Player instance
resize Emits an Object with width & height numbers
play Emits an Boolean value
pause Emits an Boolean value
stop Emits an Boolean value
ended Emits an Boolean value
seek Emits an Number value
error Emits an Error type
time-updated Emits an Object current & total time in microseconds
volume-updated Emits an Number with current volume
subtitle-available Emits an Boolean value

Contributing

  1. Fork it ( https://github.com/vinayakkulkarni/v-clappr/fork )
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

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

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

License

FOSSA Status