# videoframebyframe

> this is a reactJs video component which enables to run a video movie frame by frame

Latest version **2.0.3** (published 2022-09-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install videoframebyframe
pnpm add videoframebyframe
yarn add videoframebyframe
bun add videoframebyframe
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2022-09-28 |
| First published | 2022-05-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 37.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kobi Krasnoff |
| Maintainers | krasnoff |
| Keywords | reactjs, video |

## Links

- npm: https://www.npmjs.com/package/videoframebyframe
- Repository: https://github.com/krasnoff/video-frame-by-frame
- Homepage: https://github.com/krasnoff/video-frame-by-frame#readme
- Issues: https://github.com/krasnoff/video-frame-by-frame/issues
- npm.io page: https://npm.io/package/videoframebyframe

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^18.1.0
- [node-sass](https://npm.io/package/node-sass.md) ^7.0.1
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.9.2
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.9.3
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.9.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.3 (latest) — 2022-09-28
- 0.9.0 — 2022-09-19
- 2.0.2 — 2022-08-24
- 2.0.1 — 2022-08-24
- 1.0.9 — 2022-05-24
- 1.0.8 — 2022-05-22
- 1.0.7 — 2022-05-21
- 1.0.6 — 2022-05-21
- 1.0.5 — 2022-05-21
- 1.0.4 — 2022-05-21
- 1.0.3 — 2022-05-21
- 1.0.2 — 2022-05-21
- 0.0.2 — 2022-05-21
- 1.0.0 — 2022-05-21

## README

# Getting Started with the video frame by frame component

This component displays a particular version of an HTML Video element which enables the display of video with the ability to advance or reverse the movie frame by frame.

In order to install this component simply execute the following command:
```
npm i videoframebyframe
```

Here is how you implement the component in your react code

```
import './App.css';
import FramedVideo from 'videoframebyframe/FramedVideo';

function App() {
  return (
    <div className="App">
      <div className="videoContainer"><FramedVideo src="blender.mp4"></FramedVideo></div>
    </div>
  );
}

export default App;
```
Here is a screenshot of the video controller:

![Video screenshot](/screenshot2.png "Video screenshot")

As you can see the frame forward and the frame backward appears on the bottom center of the screen. They appear only when the video is paused.

A working sample of this component can be seen [here](https://krasnoff.github.io/video-frame-by-frame/).

The sample video has been produced by: (CC) Blender Foundation | [mango.blender.org](http://mango.blender.org)

This component was made by Kobi Krasnoff

---
_Source: https://npm.io/package/videoframebyframe · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._