This content originally appeared on DEV Community and was authored by Beingana Jim Junior
Most famous websites usually have there own custom video players such as Youtube, Facebook etc. So some times you as a web developer you want to embed a video in your website but find it hard to create one with an amazing UI. Today I will show you how to have an amazing Video and Audio player in React.
Since the default HTML5 video player usually looks different in different browsers you definetely want to avoid using it and you definetely dont want to create one from scratch so the best idea is to use a package.
We shall be using ReactJS Media library for this tutorial. The reason is because it has a great documentation and its HTML5 player has a great UI compared to other famous libraries like react player. So enough of the words, lets start
Installation
You can install it with any of your favourite package manager here we shall demostrate npm and yarn so go to your terminal and type the following command.
npm
npm install reactjs-media
yarn
yarn add reactjs-media
Now that you have installed it your can now use it.
Components
To use it you will have to import the the component you want from reactjs-media. The list of components are:
-
ReactVideofor a native video player. -
ReactAudiofor an audio player. -
FacebookPlayerfor a Facebook player(For videos from facebook ). -
Imagefor responsive and optimized images. -
YoutubePlayerfor a Youtube player.
Incase the more players are added I will update this page. This is because more players are added every time.
Usage
Now let me demonstrate how to use each of those components.
Video Player
This is the native video player but it is enhanced and given a great UI. You have to import it from the library and pass in props. It can be used for normal video files supported by the browsers.
Example
import React from "react";
import { ReactVideo } from "reactjs-media";
const App = () => {
return (
<div>
<ReactVideo
src="https://www.example.com/url_to_video.mp4"
poster="https://www.example.com/poster.png"
primaryColor="red"
// other props
/>
</div>
);
};
export default App;
This will create a player that is similar to one like this:
It has more props and they can be found in the Official documentation
Audio Player
The audio player is used for audio files and it can be used like this.
import React from "react";
import { ReactAudio } from "reactjs-media";
const MyVideo = () => {
return (
<>
<ReactAudio
src="/audio.mp4"
poster="/poster.png"
//you can pass in other props
/>
</>
);
};
Your can also import the audio player from another file in the package.
import { ReactAudio } from "reactjs-media/audio";
Youtube Player
Using the it is easy all you have to do is add the video url.
Example
const App = () => {
return (
<div>
<YoutubePlayer
src="https://youtu.be/UZCO5k1Nu70" // Reqiured
width={650}
height={600}
/>
</div>
);
};
it also hase other props so check them out in the documentation.
Facebook Player
This is used to play videos from facebook. All you have to do is copy the facebook video URL and paste it as the src prop in the component. The player will automatically load the facebook sdk into the body section of your app and then play the video. To learn more about it visit the documentaion
Example
import React from "react";
import { FacebookPlayer } from "reactjs-media";
const MyVideo = () => {
return (
<>
<FacebookPlayer
src="https://www.facebook.com/facebook/videos/10153231379946729/"
width={650}
height={600}
/>
</>
);
};
Conclusion
To me I think this is the best package out there that you can use if you want to create a video player although their might be others that are better that it but as I know when it comes to a native video player this is the best I have seen since it also includes an audio player component. You can find it's source code on Github
This content originally appeared on DEV Community and was authored by Beingana Jim Junior
Beingana Jim Junior | Sciencx (2021-02-17T20:38:33+00:00) How to create a responsive video player in React. Retrieved from https://www.scien.cx/2021/02/17/how-to-create-a-responsive-video-player-in-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.