react-video-looper
Advanced tools
Readme
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 129 weekly downloads. As such, react-video-looper popularity was classified as not popular.
We found that react-video-looper demonstrated a healthy version release cadence and project activity because the last version was released less than 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
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.