@theonlyducks/videojs-zoom

1.3.1 • Public • Published

Video.js Zoom

Simple plugin to zoom in video.js player

Version Project Size Dependencies Licence

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
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

Package Sidebar

Install

npm i @theonlyducks/videojs-zoom

Weekly Downloads

74

Version

1.3.1

License

MIT

Unpacked Size

332 kB

Total Files

9

Last publish

Collaborators

  • theonlyducks