@theonlyducks/videojs-zoom

Video.js Zoom

Simple plugin to zoom in video.js player

Table of contents

• Documentation
• Getting started
• Methods
• Options
• Development
• License

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

const zoomPlugin = video.zoomPlugin();
zoomPlugin.zoom(2);

rotate(value): void

Rotate function

• value
  • type: Number in deg

const zoomPlugin = video.zoomPlugin();
zoomPlugin.rotate(180);

move(x, y): void

Rotate function

• x
  • type: Number
• y
  • type: Number

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

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. default true
• showMove show/hide up, left, right, reset and down buttons. default true
• showRotate show/hide rotate and flip buttons. default true
• gestureHandler enable gesture zoom drag and drop, wheel. default false

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
• callback
  • type: Function

const zoomPlugin = video.zoomPlugin();
zoomPlugin.listen('click', () => {
    console.log('click');
});

Development

Install

yarn

Start server listening https://localhost:3000

yarn start

License

MIT © The Only Ducks