FEED
Side project
Tell us what your side project does
React Video Looper (https://github.com/lewhunt/
react-video-looper) is a video component that provides
non-destructive inner looping on video files. By
specifying start and end trim points, it begins
playback and then repeats an infinite (or finite) loop
on the trimmed portion of the video.Why did you create it?
Initially, it was built for an interactive fitness app that
allows the user to choose exercise type, duration and
set/rep count. It meant I could play the start and end
of an exercise routine but also loop through a
configurable amount of reps in between. Then it
became apparent there could be other use cases for a
video looper like this. So I set out to make a reusable
component that could be easily imported into other
projects. It provides an interesting alternative to the
default HTML5 video loop attribute because it can play
the original source file from beginning to end yet also
repeat loop through a trimmed portion of the video.What were you hoping to achieve?
Once I realised the component could be useful in
other applications, I wanted to take the opportunity to
build and publish an open-source package to npm for
easy installation in other projects. I also wanted toensure there was a simple UI editor tool with the
player so you could adjust looping properties without
having to rebuild the app or use an external tool to
determine the start and end loop points. A demo of
the editor tool is available on GitHub.What technologies were used in building it?
The component utilises two overlapping video
elements that play back in turn for more performant
looping on lower-powered devices. In terms of React,
Hooks were used for managing the data state and
lifecycle of functional components. Styled-
components were used for dynamic styling. The nwb
toolkit was used to handle build and publishing to
npm with unpkg enabling a script-based UMD build.How has it been received?
It’s working great in the interactive fitness app I’m
building and I’ve had really positive feedback once
people understand it’s not for looping the entire
video. There is a CodePen demo (link in GitHub
readme) that you can fork and it illustrates how you
can use it in a bare bones React project via a simple
script tag import and some basic property updates for
the video URL and start/end loop points.What do you think you’ll do next with it?
Continue with the fitness app and add more features
such as a scrub bar to specify loop points, the ability
to dynamically change the video URL and output the
resultant JSX markup so you can copy and paste the
component snippet into another project. Other than
that, I’m in the process of also using it in my next side
project, which is an experimental 3D web component
built with Vue.js. I hope to share it with you soon!SIDE PROJECT OF THE MONTHLEWIS HUNT
Hunt is a front-end
developer who’s built the
UI for several high-profile
VOD services such as BBC
iPlayer on BT TV, Amazon
Instant Video on Xbox
and Curzon Home Cinema
across the web.
w: lewhunt.com
t: @Lew_HuntINFOREACT VIDEO LOOPER
Lewis Hunt shows us round (and round) his tool
for looping sections of video online