react-video-looper
Advanced tools
A react component that provides non-destructive inner looping of a video source
A React video player for looping inner sections of a video file. Packaged as an npm component library and CDN script.
<VideoLooper source='sample.mp4' start={4.31} end={9.48} loopCount={2} isDebugMode />
See it in use here - React Fitness App
CodePen Demo (bare-bones sample)
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.
Initially built to assist in the development of an interactive 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.
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.
npm i react-video-looper
<script
type="text/javascript"
src="https://unpkg.com/react-video-looper/umd/react-video-looper.min.js"
></script>
import React from "react";
import VideoLooper from "react-video-looper";
import sampleVideo from "../assets/sample.mp4";
export default function Demo() {
return (
<div>
<VideoLooper source="{sampleVideo}" start={4.31} end={9.48} />
</div>
);
}
<body>
<div id="app"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script
src="https://unpkg.com/react@16/umd/react.production.min.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
crossorigin
></script>
<script src="https://unpkg.com/react-video-looper/umd/react-video-looper.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<VideoLooper source="sample.mp4" start={4.31} end={9.48} />, document.getElementById('app'))
</script>
</body>
| 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 |
The demo includes a simple editor that allows you to change some of the options. The react-use-form-data hook is used to manage the demo editor's data state:
The component is currently used in the React Fitness App:
FAQs
A react component that provides non-destructive inner looping of a video source
The npm package react-video-looper receives a total of 125 weekly downloads. As such, react-video-looper popularity was classified as not popular.
We found that react-video-looper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.