V-clappr NPM | npm.io

V-Clappr 🎥

Features

Built with latest @clappr/core
Built from scratch using TypeScript
Built for Vue 3 using Vite

Demo

V-Clappr 🎥

Requirements

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Installation

$ npm install v-clappr
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playback

Usage

Global component:

// main.ts
import { VClappr } from 'v-clappr';
import { createApp } from 'vue';

const app = createApp({});
app.component('VClappr', VClappr);

Or use locally

// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  components: {
    VClappr,
  },
});
</script>

For Nuxt 3, create a file in plugins/v-clappr.ts

import { VClappr } from 'v-clappr';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VClappr', VClappr);
});

Example(s)

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"
/>

import { defineComponent, reactive } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  name: 'ClapprComponent',
  components: {
    VClappr,
  },
  setup() {
    const state = reactive({
      clappr: null,
      source: 'http://clappr.io/highline.mp4',
      poster: 'http://clappr.io/poster.png',
      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: {},
        },
      },
    });
    const onInit = (clappr: any) => {
      state.clappr = clappr;
    };
    const onReady = (e: any) => {
      console.log('onReady Event: ', e);
    };
    const onResize = (e: any) => {
      console.log('onResize Event: ', e);
    };
    const onPlay = (e: any) => {
      console.log('onPlay Event: ', e);
    };
    const onPause = (e: any) => {
      console.log('onPause Event: ', e);
    };
    const onStop = (e: any) => {
      console.log('onStop Event: ', e);
    };
    const onEnded = (e: any) => {
      console.log('onEnded Event: ', e);
    };
    const onSeek = (e: any) => {
      console.log('onSeek Event: ', e);
    };
    const onError = (e: any) => {
      console.log('onError Event: ', e);
    };
    const onTimeUpdated = (e: any) => {
      console.log('onTimeUpdate Event: ', e);
    };
    const onVolumeUpdated = (e: any) => {
      console.log('onVolumeUpdate Event: ', e);
    };
    const onSubtitleAvailable = (e: any) => {
      console.log('onSubtitleAvailable Event: ', e);
    };

    return {
      state,
      onInit,
      onReady,
      onResize,
      onPlay,
      onPause,
      onStop,
      onEnded,
      onSeek,
      onError,
      onTimeUpdated,
      onVolumeUpdated,
      onSubtitleAvailable,
    };
  },
});

HTML

<v-clappr el="my-custom-id" :source="source" />

import { defineComponent, ref } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  name: 'ClapprComponent',
  components: {
    VClappr,
  },
  setup() {
    const source = ref('http://clappr.io/highline.mp4');

    return {
      source,
    };
  },
});

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

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

Note:

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