@theonlyducks/videojs-zoom
v1.3.1
Published
Simple plugin to zoom in video.js player
Downloads
145
Maintainers
Readme
Video.js Zoom
Simple plugin to zoom in video.js player
Table of contents
Documentation
See
Getting started
Requirements
yarn add video.js
Installation
npm install @theonlyducks/videojs-zoom@latest
or
yarn add @theonlyducks/videojs-zoom@latest
Usage
import '@theonlyducks/videojs-zoom/styles';
import '@theonlyducks/videojs-zoom';
Example
const video = videojs('my-video');
const zoomPlugin = video.zoomPlugin();
zoomPlugin.listen('change', data => {
console.log(data);
});
Methods
zoom(value): void
Zoom function
- value
- type:
Number
- type:
const zoomPlugin = video.zoomPlugin();
zoomPlugin.zoom(2);
rotate(value): void
Rotate function
- value
- type:
Number
in deg
- type:
const zoomPlugin = video.zoomPlugin();
zoomPlugin.rotate(180);
move(x, y): void
Rotate function
- x
- type:
Number
- type:
- y
- type:
Number
- type:
const zoomPlugin = video.zoomPlugin();
zoomPlugin.move(0, 0);
toggle(): void
Open and close modal function
const zoomPlugin = video.zoomPlugin();
zoomPlugin.toggle();
flip(signal): void
Flip video image
- x
- type:
String
use + or - for flip image
- type:
const zoomPlugin = video.zoomPlugin();
zoomPlugin.flip("-");
Options
Example:
const zoomPlugin = video.zoomPlugin({
showZoom: true,
showMove: true,
showRotate: true,
gestureHandler: false
});
showZoom
show/hide +- zoom buttons. defaulttrue
showMove
show/hide up, left, right, reset and down buttons. defaulttrue
showRotate
show/hide rotate and flip buttons. defaulttrue
gestureHandler
enable gesture zoom drag and drop, wheel. defaultfalse
Events
listen(event, callback): void
Listen events of the zoom plugin
- event
- type:
String
- options:
'change'
when click in buttons modal'click'
when modal is opened or closed
- type:
- callback
- type:
Function
- type:
const zoomPlugin = video.zoomPlugin();
zoomPlugin.listen('click', () => {
console.log('click');
});
Development
Install
yarn
Start server listening https://localhost:3000
yarn start