This article focuses on Creating and Designing a Video Streaming Application using React JS. In this application, users can stream any video just by entering the video link in the input field, the preview and streaming of the video is started in the application itself. Proper error messages are shown when an application fails to render the video.
Output Preview: Let us have a look at how the final output will look like.
Technologies Used/Pre-requisites:
Approach to Create a Video Streaming Platform with React:
- The application consists of UI components like input fields, buttons, etc along with the CSS for styling.
- The application renders the default Video when the application is loaded for the first time.
- Users can enter the video link from various sources and click on the Play Video button. The preview of the entered video will be shown in a proper responsive manner.
- The application is validated with proper video URL checking and extension checking.
Steps to create the React App & Install Required Modules:
Step 1: Create a React App
npx create-react-app video-streamStep 2: Navigate to the newly created project folder by executing the below command.
cd video-streamStep 3: Steps to install required modules
npm install react-router-domProject Structure:
The updated dependencies in package.json will look like this:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Insert the below code in the App.js, HomeScreen.js, and App.css file mentioned in the above directory structure.
Javascript
// App.jsimport React from 'react';
import { BrowserRouter as Router,
Route,
Routes
} from 'react-router-dom';
import HomeScreen from './HomeScreen';
import './App.css';
const App = () => { return (
<Router>
<div className="app">
<Routes>
<Route path="/"
element={<HomeScreen
/>} />
</Routes>
</div>
</Router>
);
};export default App;
|
Javascript
// HomeScreen.jsimport React, { useState,
useEffect
} from 'react';
import { useNavigate
} from 'react-router-dom';
import './App.css';
const HomeScreen = ({ defaultVideoUrl }) => { const [vURL, set_vURL] = useState(defaultVideoUrl);
const [errorMsg, set_ErrorMsg] = useState('');
const [vReady, set_vReady] = useState(true);
useEffect(() => {
set_ErrorMsg('');
}, [defaultVideoUrl]);
const vPlayFn = () => {
if (validateFn(vURL)) {
set_ErrorMsg('');
set_vReady(true);
} else {
set_ErrorMsg('Please enter a valid video URL');
}
};
const validateFn = (url) => {
return url.trim() !== '' && vFormatFn(url);
};
const vFormatFn = (url) => {
const vFormats = ['mp4', 'webm', 'ogg',
'ogv', 'avi', 'mov', 'flv', 'mkv'];
const ext = url.split('.').pop();
if (url.includes('youtube.com') ||
url.includes('youtu.be')) {
return true;
}
return vFormats.includes(ext.toLowerCase());
};
const checkYTFn = (url) => {
return url.includes('youtube.com') ||
url.includes('youtu.be');
};
const getYTFn = (url) => {
const match = url.match(/[?&]v=([^?&]+)/);
return match ? match[1] : '';
};
const inputFn = (e) => {
set_vURL(e.target.value);
set_vReady(false);
};
return (
<div className="container">
<h1 className="heading">
GeeksforGeeks Video Streaming App
</h1>
<div className="input-container">
<input
className="input"
placeholder="Enter Video URL"
onChange={inputFn}
value={vURL}
/>
<button className="button"
onClick={vPlayFn}>
Play Video
</button>
</div>
{
errorMsg && <p className="error-message">
{errorMsg}
</p>
}
<div className="video-preview">
{vReady && (
<>
{checkYTFn(vURL) ? (
<iframe
title="YouTube Video Preview"
width="100%"
height="315"
src={`
https://www.youtube.com/embed/${getYTFn(vURL)}`}
frameBorder="0"
allowFullScreen
></iframe>
) : (
<video controls width="100%" height="315">
<source src={vURL} type="video/mp4" />
Your browser does not support the video tag.
</video>
)}
</>
)}
</div>
</div>
);
};export default HomeScreen;
|
CSS
/* App.css */body { margin: 0;
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #8ff062, #6eecb7);
color: white;
height: 100vh;
overflow: hidden;
}.app { background: linear-gradient(135deg, #ffffff, #ffffff);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin: 20px auto;
padding: 20px;
width: 60%;
border-radius: 10px;
}.container { display: flex;
flex-direction: column;
align-items: center;
padding: 16px;
}.heading { font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
color: green;
}.input-container { display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 20px;
}.input { width: 80%;
height: 40px;
margin-bottom: 10px;
border: 2px solid rgb(255, 0, 0);
border-radius: 5px;
padding-left: 10px;
font-size: 1em;
outline: none;
background: rgba(255, 255, 255, 0.1);
}.button { background: linear-gradient(45deg, #228b22, #2eb82e);
color: white;
border: none;
height: 40px;
border-radius: 5px;
cursor: pointer;
width: 30%;
font-size: 1em;
transition: background 0.3s ease-in-out;
outline: none;
}.button:hover { background: linear-gradient(45deg, #2eb82e, #228b22);
}.error-message { color: #ff0000;
margin-bottom: 10px;
font-size: 0.8em;
}.video-preview { width: 100%;
max-width: 560px;
margin-top: 20px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
}@media (max-width: 768px) {
.input {
width: 100%;
}
.button {
width: 100%;
}
} |
Start your application using the following command:
npm startOutput: Type the following URL in the address bar http://localhost:3000/
Recommended Articles