In this tutorial, you will learn how to build a responsive video and audio player in React js application using npm install reactjs-media.
How to Create a responsive video and audio player in React
Here is example of creating a responsive video and audio player:
Step 1 – Create React App
Run the following command on your cmd to create a new react app:
npx create-react-app my-react-app
To run the React app:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install React Js Media Package
Run the following command to install react media package in react js app:
npm install reactjs-media
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 3 – Create a Audio and Video Component
Visit the src directory of your react js app and create a media player components:
- For Build Video Player Component
- For Build Audio Player Component
For Build Video Player Component
Visit the components directory, create MediaPlayerComponent.js file, and add the given below code to create the Responsive video player:
import React, { Component } from "react";
import { ReactVideo } from "reactjs-media";
class MediaPlayerComponent extends Component {
render() {
return (
<div>
<ReactVideo
src='https://www.example.com/myvideo.mp4'
poster='/poster.png'
primaryColor="red"
autoPlay
/>
</div>
);
}
}
export default MediaPlayerComponent;
For Build Audio Player Component
Visit the components directory, create MediaPlayerComponent.js file and add the given below code to create the Responsive audio player in react:
import React, { Component } from "react";
import { ReactAudio } from "reactjs-media";
class MediaPlayerComponent extends Component {
render() {
return (
<div>
<ReactAudio
src="/your_audio_file.mp4"
poster="/your_poster_file.png"
/>
</div>
);
}
}
export default MediaPlayerComponent;
Step 4 – Import Component in App.js
In this step, you need to add MediaPlayerComponent.js file in src/App.js file:
import React from 'react';
import './App.css';
import MediaPlayerComponent from './components/MediaPlayerComponent';
function App() {
return (
<div className="App">
<MediaPlayerComponent />
</div>
);
}
export default App;
Conclusion
That’s it! Using the React js media library, you have learned how to implement a responsive video and audio player in React.
