https://github.com/lewhunt/react-video-looper
A video player component for looping inner sections of video. Packaged as an npm library and cdn script.
https://github.com/lewhunt/react-video-looper
javascript looper looping playback player react react-video-player repeats trimming video video-looper video-player
Last synced: 7 months ago
JSON representation
A video player component for looping inner sections of video. Packaged as an npm library and cdn script.
- Host: GitHub
- URL: https://github.com/lewhunt/react-video-looper
- Owner: lewhunt
- License: mit
- Created: 2020-01-10T17:28:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-10-12T17:03:27.000Z (12 months ago)
- Last Synced: 2025-02-24T20:54:54.956Z (8 months ago)
- Topics: javascript, looper, looping, playback, player, react, react-video-player, repeats, trimming, video, video-looper, video-player
- Language: JavaScript
- Homepage: https://lewhunt.github.io/react-video-looper/
- Size: 30.5 MB
- Stars: 28
- Watchers: 2
- Forks: 6
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React Video Looper
A React video player for looping inner sections of a video file. Packaged as an npm component library and CDN script.
```
```
[See it in use here - React Fitness App](https://lewhunt.github.io/react-fitness-app/)
[Demo Editor (with debug mode)](https://lewhunt.github.io/react-video-looper/)
[CodePen Demo (bare-bones sample)](https://codepen.io/lewhunt/pen/vYEaKMj)
## Intro
### What is it?
This react component provides non-destructive inner looping on video files. By specifying start and end trim points it begins playback at zero and then repeats an infinite (or finite) loop on the trimmed portion of the video. Fullscreen by default.
### Why do it?
Initially built to assist in the development of an [interactive fitness app](https://lewhunt.github.io/react-fitness-app/), it offers an interesting alternative to the default HTML5 video loop attribute because it can play the original source file from the start but then repeat loop the trimmed portion of the video. In many cases it provides a more seamless loop compared to the default loop attribute or media fragment parameters.
### How is it done?
Under the hood this component utilises two overlapping video elements that playback in turn. Running the demo in debug mode (with split view enabled) further illustrates this technique with debug text and the cloned video is set to greyscale. See the end of this readme for more info on the [editor](#demo-editor).
## Install
### npm package (recommended)
```bash
npm i react-video-looper
```
### CDN script (for prototyping only)
```js
```
## Usage
### Node.js development setup (recommended)
```js
import React from "react";
import VideoLooper from "react-video-looper";
import sampleVideo from "../assets/sample.mp4";
export default function Demo() {
return (
);
}
```
### Browser script setup (for prototyping only)
```js
ReactDOM.render(
<VideoLooper source="sample.mp4" start={4.31} end={9.48} />, document.getElementById('app'))
```
## Options / Props
| Name | Type | Required | Default | Description |
| ---------------- | ------ | -------- | ------------ | ----------------------------------------------------------------------- |
| `source` | string | required | 'sample.mp4' | Name of the video source file |
| `start` | number | required | 4.31 | starting point of loop in seconds |
| `end` | number | required | 9.48 | ending point of loop in seconds |
| `speed` | number | optional | 1 | video playback rate |
| `loopCount` | number | optional | null | optional amount of loops to run before playing to end of video |
| `autoPlay` | bool | optional | true | automatically start video playback |
| `muted` | bool | optional | true | disable audio of video loop |
| `playsInline` | bool | optional | true | prevent automatic fullscreen mode in mobile browsers |
| `isDebugMode` | bool | optional | false | debug mode titles the active video instance and current playback time |
| `isSplitView` | bool | optional | false | illustrative split-view of the two video instances playing side by side |
| `width` | string | optional | '100%' | css width of the component (default is full width) |
| `height` | string | optional | '100vh' | css height of the component (default is full height) |
| `objectFit` | string | optional | 'cover' | css object-fit size of the video (default is clipped to fit) |
| `objectPosition` | string | optional | '40%' | css object-position alignment of the video |
## Demo Editor
The demo includes a simple editor that allows you to change some of the options. The [react-use-form-data hook](https://github.com/lewhunt/react-use-form-data) is used to manage the demo editor's data state:
## Example In Use
The component is currently used in the [React Fitness App](https://lewhunt.github.io/react-fitness-app/):
