Here’s A Quick, Easy Responsive Video Player for React
One thing I’ve internalized — for better or for worse — is that if something seems like a simple ask, it’s probably a much more difficult thing to code. I couldn’t tell you how much time I’ve spent trying to set up seemingly easy behaviors, often without a resolution. (Definitely a shameful amount of time.) Granted, I’m still a newbie in the software engineering game, but the experiences have help set expectations for myself and taught me how valuable strategies like timeboxing are, for instance.
So, when I needed to figure out how to implement a responsive video for a Flatiron School project I’m working on, I dove right in expecting hours of trial and tribulation. Luckily for me, after a short time researching, I found a tutorial and accompanying repo for a React component called React Player. Chalk it up to my inexperience or the super-friendly structure of React itself, but in the end, getting a responsive video player on my page was far easier than I anticipated — and I even got a chance to write about it, too!
Want to read this story later? Save it in Journal.
React Player is a React component created by developer Pete Cook. It’s a fully-featured component that lets you not only set up a responsive video player component but also contains a collection of props and methods that allow interesting interaction with state, for instance. Below are a few examples:
onProgess is a callback prop that fires during a video’s playback. It contains a played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds. For example:
{played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7}
onBuffer is a callback prop that is called — you guessed it — when the media in question begins to buffer. In the React app I’m working on, this would open up opportunities for assuaging user frustration for instance with a friendly message, perhaps.
onEnded fires when the video has ended, setting up opportunities for firing off another action, like the next song or even a potential redirect.
seekTo(amount, type) is a method that seeks to the given number of seconds, or fraction if amount is between 0 and 1 . The type parameter lets you specify 'seconds' or 'fraction' to override default behavior. In the React application I’m working on, this method would be handy in specifying a point in the song that relates to a piece of information about its inspiration or creation.
One of the more interesting props, light will render a video thumbnail with a simple play icon, and only load the full player once a user has interacted with the image. In the React application I’m working on, having this prop available seems like it would allow for more diverse presentational and functional options.
BONUS I’m definitely in full project mode because I’m at that stage where the tension between what I need to do to just reach MVP is butting up against all of the ideas I want to see happen down the line!
Almost immediately after writing this article, the idea of a floating video player came to mind. So, I did my usual Google-fu and found out about pizza3’s react-video-pop. I’m happy React is so accessible. It helps that it has such a vibrant community behind it making all kinds of cool projects!
Check this article out later on for the updated project and a demo!
More from Journal
There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:
