vinayakkulkarniV-Clappr 🎥
Features
- Built with latest
@clappr/core - Built from scratch using TypeScript
- Built for Vue 3 using Vite
Demo
Table of Contents
Requirements
Build Setup
# install dependencies
$ npm ci
# package the library
$ npm run buildInstallation
$ npm install v-clappr
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playbackUsage
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)
<summary>
Example 1 (w/ all options – refer App.vue)
</summary>
HTML
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
javascript
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,
};
},
});
<summary>
Example 2 (minimal)
</summary>
HTML
html
<v-clappr el="my-custom-id" :source="source" />
JS
javascript
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
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
