Skip to main content

@vinayakkulkarni/v-clappr@3.4.0

๐Ÿ‘๐Ÿป Vue wrapper for Clappr media player ๐Ÿ“น

Works with
This package works with Bun
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
It is unknown whether this package works with Deno
This package works with Browsers
JSR Score
47%
Published
2 days ago

V-Clappr ๐ŸŽฅ

GitHub Workflow Status GitHub Workflow Status GitHub Workflow Status GitHub release (latest SemVer) npm DeepScan grade Snyk Vulnerabilities for GitHub Repo

GitHub contributors npm type definitions npm npm npm bundle size (version)

built using janak vue vite eslint prettier typescript


Features


Demo

Edit v-clappr


Table of Contents

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)

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 { 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,
    };
  },
});
Example 2 (minimal)

HTML

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

JS

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

  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

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @vinayakkulkarni/v-clappr

Import symbol

import * as mod from "@vinayakkulkarni/v-clappr";

Add Package

npx jsr add @vinayakkulkarni/v-clappr

Import symbol

import * as mod from "@vinayakkulkarni/v-clappr";

Add Package

yarn dlx jsr add @vinayakkulkarni/v-clappr

Import symbol

import * as mod from "@vinayakkulkarni/v-clappr";

Add Package

pnpm dlx jsr add @vinayakkulkarni/v-clappr

Import symbol

import * as mod from "@vinayakkulkarni/v-clappr";

Add Package

bunx jsr add @vinayakkulkarni/v-clappr

Import symbol

import * as mod from "@vinayakkulkarni/v-clappr";