react-video-zoom

Overview

React component for magnifying glass circle on a video when hovering.

Demo

Demo

Install

npm install react-video-zoom --save

Usage

import {
  ReactVideoZoom,
  pauseReactVideoZoom,
  playReactVideoZoom,
} from "react-video-zoom";
import { useRef } from "react";
import VideoPath from "./test_video.mp4";

function App() {
    const mainVideoRef = useRef<HTMLVideoElement>(null);
    const zoomVideoRef = useRef<HTMLVideoElement>(null);

    const refs = { mainVideoRef, zoomVideoRef };

    return (
        <>
            <ReactVideoZoom
                src={VideoPath}
                zoom={zoom}
                refs={refs}
                width={1000}
                loop
                muted
            />
            <div onClick={() => playReactVideoZoom(refs)}>Play</div>
            <div onClick={() => pauseReactVideoZoom(refs)}>Pause</div>
        </>
    )
}

Properties of <ReactVideoZoom /> component

| Property | Type | Is required | Description | | -------- | ------------------ | ----------- | ---------------------------------- | | src | string | Requred | Source of the video | | zoom | number | Requred | Magnification value | | refs | ReactVideoZoomRefs | Requred | Object of React ref objects | | width | number | Optional | Width of the video in pixels | | loop | boolean | Optional | When true, video will play on loop | | muted | boolean | Optional | When true, video will be muted |

playReactVideoZoom(refs) and pauseReactVideoZoom(refs) playback control functions

The package also exports 2 playback control functions for playing and pausing the videos in sync. Object refs of type ReactVideoZoomRefs must be passed as an argument to both of them.

ReactVideoZoomRefs type

The refs object that is passed to <ReactVideoZoom /> component and playback control functions must be of the following type:

type ReactVideoZoomRefs = {
  mainVideoRef: React.RefObject<HTMLVideoElement>;
  zoomVideoRef: React.RefObject<HTMLVideoElement>;
};