The use of video content on webpages is becoming increasingly popular. Its importance cannot be overestimated as it engages users, and creates a lasting impression in just a few seconds.
It is for this reason that the steps involved in the creation of a video component using React will be discussed in this article.

The component supports YouTube and Vimeo to allow for the flexibility in its use by users.

Sandbox

We completed the entire project on Codesandbox, and you can fork the repo to run it.

CodeSandbox id="react-videoplayer-f62ej" title="React-Videocomponent"/>

Prerequisites/Installation

No advanced requirements are needed. However, a basic knowledge of React installation is required.

To create a React application, open the terminal window or command prompt and change the directory to the folder where you want to create the application.

Moreover, an online code editor which supports React can be used.

Run npx create-react-app react-video-player to create the application.

The above command installs the create-react-app package into the react-video-player folder of our application. The react-video-player can be given a different name, but should be in lower case.

Change directory to the application folder by running cd react-video-player command.

After the application has been created, install reactjs-media from a terminal window to install the application dependencies.

npm install reactjs-media

Start the application by running npm start.

Creating the video component

To structure the video player, the video component remains our primary interest. The video component of the reactjs-media involves an effortless process. To do this, the original code in the src/App.jsfolder is replaced with the snippet below.

import "./styles.css";
  //imports basic styling from the css file.
import { ReactVideo } from "reactjs-media";
  //imports the React video component the reactjs-media dependency.
export default function App() {
    //exports the default app into the index.js for rendering
    return (
    //defines the properties of the video component
    <div className="App" style={{ height: 500 }}>
      <h1>React video player</h1>
      <ReactVideo
        src="https://player.vimeo.com/external/527751333.hd.mp4? s=6c0db75ad52213d37e122ed4038c6150997e870e&profile_id=172&oauth2_t oken_id=57447761"
        autoPlay
        primaryColor="blue"
        poster="https://images.pexels.com/photos/7422113/pexels- photo-7422113.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
      />
    </div>
    );
    }   

The audio component could also be created using a similar approach.

Conclusion

In this article, we went through the creation of a video player using a React component that supports YouTube and Vimeo. The application dependencies with the video component which is reactjs-media was installed through npm.

This article would not be complete without a mention of how this single page application can be authenticated with Auth0.
With Auth0, an authentication API would be integrated into the application in just a couple of steps. To find out how, visit https://auth0.com/docs/libraries/auth0-react.

In addition, the media and other image assets can be stored in the cloud with just a few clicks using Cloudinary. For a detailed overview, visit https://cloudinary.com/documentation/upload_images.

As the code was run in codesandbox, the images might need to be resized to fit the desktop screen, if it is going to be run from an offline code editor. To resize the images, follow the complete walkthrough on https://cloudinary.com/blog/cool_tricks_for_resizing_images_in_javascript.

Further reading

https://github.com/jim-junior/reactjs-media

https://github.com/auth0/auth0-react

https://cloudinary.com/

Content created for the Hackmamba Jamstack Content Hackathon