https://github.com/vinayakkulkarni/v-clappr
👏🏻Vue.js wrapper for Clappr media player
https://github.com/vinayakkulkarni/v-clappr
clappr clappr-player v-clappr video video-player vue-clappr vue-component vuejs
Last synced: about 2 months ago
JSON representation
👏🏻Vue.js wrapper for Clappr media player
- Host: GitHub
- URL: https://github.com/vinayakkulkarni/v-clappr
- Owner: vinayakkulkarni
- License: mit
- Created: 2019-04-19T21:21:05.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-05-08T19:23:37.000Z (about 2 months ago)
- Last Synced: 2025-05-09T00:02:15.234Z (about 2 months ago)
- Topics: clappr, clappr-player, v-clappr, video, video-player, vue-clappr, vue-component, vuejs
- Language: Vue
- Homepage: https://v-clappr.netlify.app
- Size: 7.42 MB
- Stars: 27
- Watchers: 2
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# V-Clappr 🎥
[](https://github.com/vinayakkulkarni/v-clappr/actions/workflows/ci.yml)
[](https://github.com/vinayakkulkarni/v-clappr/actions/workflows/codeql.yml)
[](https://github.com/vinayakkulkarni/v-clappr/actions/workflows/shipjs-trigger.yml)
[](https://github.com/vinayakkulkarni/v-clappr/releases)
[](https://www.npmjs.com/package/v-clappr)
[](https://deepscan.io/dashboard#view=project&tid=9055&pid=11603&bid=309654)
[](https://snyk.io/test/github/vinayakkulkarni/v-clappr)
[](https://github.com/vinayakkulkarni/v-clappr/graphs/contributors)
[](https://github.com/vinayakkulkarni/v-clappr/blob/main/package.json)
[](http://npm-stat.com/charts.html?package=v-clappr)
[](http://npm-stat.com/charts.html?package=v-clappr)
[](https://bundlephobia.com/package/v-clappr@latest)
[](https://github.com/vinayakkulkarni/janak)
[](https://vuejs.org/)
[](https://vitejs.dev)
[](https://eslint.org/)
[](https://prettier.io/)
[](https://www.typescriptlang.org/)
---
## Features
- Built with latest [`@clappr/core`](https://www.npmjs.com/package/@clappr/core)
- Built from scratch using [TypeScript](https://www.typescriptlang.org)
- Built for [Vue 3](https://vuejs.org) using [Vite](https://vitejs.dev)
---
## Demo
[](https://stackblitz.com/edit/v-clappr?file=src/App.vue)
---
## Table of Contents
- [V-Clappr 🎥](#v-clappr-)
- [Features](#features)
- [Demo](#demo)
- [Table of Contents](#table-of-contents)
- [Requirements](#requirements)
- [Build Setup](#build-setup)
- [Installation](#installation)
- [Usage](#usage)
- [Example(s)](#examples)
- [API](#api)
- [Props](#props)
- [Events](#events)
- [Contributing](#contributing)
- [Author](#author)
- [License](#license)
## Requirements
- [Vue 3.x](https://vuejs.org/)
- [@clappr/core](https://www.npmjs.com/package/@clappr/core)
- [@clappr/plugins](https://www.npmjs.com/package/@clappr/core)
- [@clappr/hlsjs-playback](https://www.npmjs.com/package/@clappr/hlsjs-playback)
### Build Setup
```bash
# install dependencies
$ npm ci
# package the library
$ npm run build
```
## Installation
```bash
$ npm install v-clappr
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playback
```
## Usage
Global component:
```js
// main.ts
import { VClappr } from 'v-clappr';
import { createApp } from 'vue';
const app = createApp({});
app.component('VClappr', VClappr);
```
Or use locally
```js
// component.vue
import { defineComponent } from 'vue';
import { VClappr } from 'v-clappr';
export default defineComponent({
components: {
VClappr,
},
});
```
For Nuxt 3, create a file in `plugins/v-clappr.ts`
```js
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
```html
```
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,
};
},
});
```
Example 2 (minimal)
HTML
```html
```
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](https://github.com/clappr/clappr-core#hammer_and_wrench-configuration) defaults: [L47-L69](src/VClappr.vue#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](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](https://github.com/vinayakkulkarni/v-clappr/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-clappr** © [Vinayak](https://vinayakkulkarni.dev), Released under the [MIT](./LICENSE) License.
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-clappr/contributors)).
> [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)
## License
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-clappr?ref=badge_large)