V-Clappr 🎥
Features
- Built with latest
@clappr/core - Built from scratch using TypeScript
- For Vue 2.x version –
npm i v-clappr@2 - For Vue 3.x version –
npm i v-clappr@3
Demo
Table of Contents
Requirements
- vue
^2.x - @vue/composition-api
^1.x - @clappr/core
^0.4.18 - @clappr/plugins
^0.4.13 - @clappr/plugins
^0.6.0 - dash-shaka-playback
^3.0.3
Build Setup
# install dependencies
$ npm ci
# package the library
$ npm run buildInstallation
$ npm install v-clappr --save
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playback dash-shaka-playback --save
$ npm install @vue/composition-api --save-devCDN: UNPKG | jsDelivr (available as window.VClappr)
Usage
Globally
As a component
import { VClappr } from 'v-clappr';
Vue.component('VClappr', VClappr);As a plugin
import VClappr from 'v-clappr';
Vue.use(VClappr);Locally
As a component
import { VClappr } from 'v-clappr';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 { VClappr } from 'v-clappr';
Vue.component('example-component', {
components: {
VClappr,
},
data: () => ({
source:'https://your.site/yourfile.mp4',
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: {},
},
poster: 'https://picsum.photos/3840/2160',
},
clappr: null,
}),
methods: {
oninit(clappr) {
this.clappr = clappr;
},
onready(event) {
console.log('inside hook: onready', event);
},
onplay(event) {
console.log('inside hook: onplay', event);
},
onpause(event) {
console.log('inside hook: onpause', event);
},
onstop(event) {
console.log('inside hook: onstop', event);
},
onended(event) {
console.log('inside hook: onended', event);
},
onfullscreen(isBool) {
console.log('player fullscreen?', isBool);
},
onresize(resize) {
console.log('Resized object', resize);
},
onseek(time) {
console.log('on seek, time in seconds:', time);
},
ontimeupdate(progress) {
console.log('Progress of played video:', progress);
},
onvolumeupdate(volume) {
console.log('Volume updated, current volume:', volume);
},
onerror(e) {
console.log('le error:', e);
},
},
});Example 2 (minimal)
HTML
<v-clappr
el="mycustomid"
:source="source"
/>JS
import { VClappr } from 'v-clappr';
Vue.component('example-component', {
components: {
VClappr,
},
data: () => ({
source:'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}),
});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
