Floating video component made in react , which is draggable across any coordinate of the screen, consist of basic controls like mute, play etc and resizable too across any corner of the window. The working is inspired from the MacOS picture to picture feature.
npm install --save react-video-popInside HTML file
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- the div where your react DOM renders everything -->
<div id="root"></div>
<!-- the div which will render floating video -->
<div id='video-root'></div>
</body>
</html>Inside your js
import React, { Component } from 'react';
import Scene from '../assets/devstories.webm';
import VideoPop from 'react-video-pop';
export default class App extends Component {
render() {
return (
<VideoPop Src={Scene} mute={true} autoplay={true} root="video-root" ratio={{w:16,h:9}} />
);
}
}| Prop | Description | Type | Default Value |
|---|---|---|---|
| Src | Required. A unique string to identify the component. | string | null |
| Poster | Apply the thumbnail image over video before playing | string | null |
| autoplay | autoplay the video on render. | boolean | true |
| mute | mute the video before render. | boolean | false |
| duration | Video duration (in seconds). | int | 0 |
| root | Required. Portal div element id attribute | string | null |
| ratio | Required. Aspect ratio of the video src. | object | {w:16,h:9} |
The floating video element is made using the react portal api. Where when the user scrolls down to cenrtain limit the portal element gets rendered, following the ongoing video stream. The rest drag and drop animation on the floating video element is done with requestAnimationFrame API using the spring constant formula.
- Synchronize the audio lag when the video modal gets shown.
In source folder:
npm run start
npm linkIn project:
npm link react-video-popMIT