react-video-zoom v1.0.11

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

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