react-pipviewer v0.1.0

react-pipviewer

react-pipviewer 零依赖实现自定义视频画中画

Installation

# with NPM
npm install react-pipviewer --save-dev

# with Yarn
yarn add react-pipviewer

Usage

import pipviewer from "react-pipviewer";

const APP = () => {
  const videoRef = useRef(null);
  useEffect(() => {
    pipviewer({ ref: videoRef });
  }, []);
  return (
    <div>
      <video
        width="600"
        height="400"
        ref={videoRef}
        src="https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4"
        poster="https://static.veer.com/veer/static/resources/keyword/2020-02-19/533ed30de651499da1c463bca44b6d60.jpg"
        controls
      ></video>
      <div style={{ height: "1000px" }}></div>
    </div>
  );
};

APIs

pipviewer(Object)