React.js is one of the most popular libraries for creating front-end user interfaces, especially for building single-page applications (SPAs). Developed and maintained by Facebook, React has gained immense popularity due to its efficient, declarative, and component-based approach.
Due to its simplicity, React.js is widely used by developers for building user interfaces, and adding video is sometimes a key requirement. Therefore, in this blog, we’ll explore different ways to use video in React.js. So without wasting time, let’s dive in deep:
For quick reference, we’ve just created a new React.js app that renders “Learn How to Use Video in React js” on the homepage. You can either start with this new app or add the video to an existing one. The code is straightforward—just follow the step-by-step guide.
import React from 'react'
function App() {
return (
<div className="App">
<h1>Learn How to Use Video in React js</h1>
</div>
);
}
export default App;
Step-1 Using the HTML Video Tag Directly
The first step to use video in React.js is by utilizing the HTML <video> tag, introduced in HTML5. Inside the <video> tag, we need to add a <source> element that specifies the path to our video file.
Remember, we are using a random video named background-video.mp4 placed inside the src directory.
Here is the code :
import React from 'react'
import myVideo from './background-video.mp4'
function App() {
return (
<div className="App">
<h1>Learn How to Use Video in React js</h1>
{/* Video Added Below */}
<video width="600" controls autoPlay>
<source src={myVideo} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
);
}
export default App;
Once you write this code, you’ll see an output like this:
About HTML Video tag:
The <video> tag was introduced in HTML5, which was finalized in October 2014. It allows you to embed video content directly in a web page, providing a standardized way to display and control video playback without relying on external plugins like Flash.
Most modern browsers, including Chrome, Firefox, Safari, and Edge, support the <video> tag. The <video> tag supports various attributes, including controls, autoplay, loop, muted, and poster.
Step-2 : Using ReactPlayer Package
If you prefer not to use the default HTML video tag, ReactPlayer is an excellent alternative. ReactPlayer is a versatile React library for playing videos from various sources, including local files, YouTube, Facebook, Twitch, Vimeo, and other top platforms.
Let’s understand how to use this library for your video needs.
Install NPM package
You need to install the package first by running the following command:
npm install react-player # or yarn add react-player
Once you install the package, you can simply copy the code below and see the magic. Remember, we are using the same local video. If you have a video from sources like YouTube, Vimeo, Facebook, etc., you can add that link as well.
Here is the code:
import React from 'react'
import ReactPlayer from 'react-player'
import myVideo from './background-video.mp4'
function App() {
return (
<div className="App">
<h1>Learn How to Use Video in React js- Using React Player</h1>
{/* Video Added Below */}
<ReactPlayer url={myVideo} controls />
</div>
);
}
export default App;
Once you use this code, you’ll see an output like this:
About ReactPlayer Package:
As I mentioned, this is one of the best packages for video needs. It offers features such as video controls, setting width and height, and even Picture-in-Picture (PIP) mode. This package boasts a whopping 1 million downloads every week and has a size of just 1.5 MB. For more information about this package, visit: React Player Package.
Step-3 : Using ReactPlyr Package
This is another excellent package for your video needs. It is an amazing library with a size of just 67 KB. Unlike ReactPlayer, which has around 1 million downloads, this package has approximately 20,000 weekly downloads. However, despite its smaller numbers, it is a package you should definitely consider.
Install NPM package :
You need to install the package first by running the following command:
npm install plyr-react
After installing the package, just copy and paste the code below into your component, and you’ll see the working video output.
Here is the code:
import React from "react";
import Plyr from "plyr-react";
import "plyr-react/plyr.css";
function App() {
const video = {
id: "https://www.youtube.com/watch?v=bTqVqk7FSmY",
source: "youtube",
};
const playerStyle = {
width: "640px", // Set your desired width
height: "360px", // Set your desired height
};
return (
<div className="App">
<h1>Learn How to Use Video in React js- Using React Plyr</h1>
{/* Video Added Below */}
<div style={playerStyle}>
<Plyr
source={{
type: "video",
sources: [{ src: video.id, provider: video.source }],
}}
/>
</div>
</div>
);
}
export default App;
Once you follow the above steps, you’ll see the output in your React app
If you want more information about this package and its available options, you can visit: Plyr Package. Here is the live example for React Plyr : CodeSand Box
Conclusion
In the end, it all depends on how you want to use video in React.js. If you need more advanced features, you can choose any of the libraries mentioned earlier. However, if you simply want to use video to enhance your UI, the basic HTML <video> tag will suffice.
Sources
The information in this blog is gathered from various resources. Before using any library, visit its official page or NPM package to see the latest updates and changes.
Here are the references for that :
- HTML Video Tag : https://www.w3schools.com/tags/tag_video.asp
- React Player Package : https://www.npmjs.com/package/react-player
- Plyr React : https://www.npmjs.com/package/plyr-react
If you have any questions or feedback, please drop a message below. I’ll be happy to assist you.
Share the article with your friends:
Hello Readers !
Hello! I’m Ravi Rathore, an enthusiastic front-end developer with over 4 years of experience and an SEO expert from Mumbai, India. I provide personalized training in React.js and SEO to help you succeed in web development. If you want to build fantastic web apps or improve your site’s visibility on search engines, I’m here to help.
