@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

Getting started

Requirements

• With browser Video.js
• With npm npm istall video.js
• With yarn yarn add video.js

Installation

• With browser Download
• With npm npm install @theonlyducks/videojs-zoom@latest
• With yarn yarn add @theonlyducks/videojs-zoom@latest

Usage

• With Browser

<link rel="stylesheet" type="text/css" href="/dist/videojs-zoom.css">
<script src="/dist/videojs-zoom.js"></script>

• With Node

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("-");

enablePlugin(): void

Enable the plugin if it is disabled

const zoomPlugin = video.zoomPlugin();
zoomPlugin.enablePlugin();

disablePlugin(): void

Disables all visual features of the plugin if enabled

const zoomPlugin = video.zoomPlugin();
zoomPlugin.disablePlugin();

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