react-video-pop
v1.0.3
Published
Pop in video element's
Downloads
61
Readme
react-video-pop
Table Of Contents
Introduction
Floating video component made in react , which is draggable across any coordinate of the screen and resizable too. The working is inspired from the MacOS picture to picture feature.
Installation
npm install --save react-video-popUsage
Inside 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}} />
);
}
}
API
| 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} |
Demo
How does it work
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.
Development
In source folder:
npm run start
npm linkIn project:
npm link react-video-popLicense
MIT