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
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
PEP 770 proposes adding SBOM support to Python packages to improve transparency and catch hidden non-Python dependencies that security tools often miss.
Security News
Socket CEO Feross Aboukhadijeh discusses open source security challenges, including zero-day attacks and supply chain risks, on the Cyber Security Council podcast.
Security News
Research
Socket researchers uncover how threat actors weaponize Out-of-Band Application Security Testing (OAST) techniques across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.