V-Clappr 🎥

Features

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

Demo

Table of Contents

• V-Clappr 🎥
  • Features
  • Demo
  • Table of Contents
  • Requirements
    • Build Setup
  • Installation
  • Usage
  • Example(s)
  • API
    • Props
    • Events
  • Contributing
  • Author
  • License

Requirements

• Vue 3.x
• @clappr/core
• @clappr/plugins
• @clappr/hlsjs-playback

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

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,
    };
  },
});

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