In this article, we will learn how to build a video player web application using HTML, CSS, and JS.
Let’s see the key features of a video player web application.
- Users can select video files from the file explorer.
- Play button to start the video.
- Pause button to pause the video.
- Stop button to stop the video.
- The volume up button will increase the volume of a video.
- The volume down button will decrease the volume of a video.
Let’s learn how we can build such functionality.
Step 1:-
We are building a simple UI for our video player application using HTML and CSS.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player Web Application</title>
<!-- Basic css styling -->
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
flex-direction: column;
}
.video-container {
text-align: center;
margin-top: 20px;
}
video {
width: 100%;
max-width: 600px;
border-radius: 8px;
margin-top: 20px;
}
.controls {
margin-top: 10px;
}
button {
margin: 0 5px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Input tag for taking any video format video from user device -->
<input type="file" id="fileInput" accept="video/*">
<div class="video-container">
<!-- Video tag to display video -->
<video id="video" controls></video>
<!-- Buttons to provide funtionality to video player -->
<div class="controls">
<button id="playPauseBtn">Play</button>
<button id="stopBtn">Stop</button>
<button id="muteBtn">Mute</button>
<button id="volumeUpBtn">Volume +</button>
<button id="volumeDownBtn">Volume -</button>
</div>
</div>
<!-- Adding extern javascript file to our html document -->
<script src="script.js"></script>
</body>
</html>
Step 2:-
Building main application login using JS.
// script.js
// Get references to the video and control buttons
const playPauseBtn = document.getElementById('playPauseBtn');
const muteBtn = document.getElementById('muteBtn');
const video = document.getElementById('video');
const volumeUpBtn = document.getElementById('volumeUpBtn');
const volumeDownBtn = document.getElementById('volumeDownBtn');
const stopBtn = document.getElementById('stopBtn');
const fileInput = document.getElementById('fileInput');
// Loading the selected video
fileInput.addEventListener('change', () => {
// if user select more than 1 file by default it will select first file
const file = fileInput.files[0];
// URL.createObjectURL() function will generate the url of selected video
const videoURL = URL.createObjectURL(file);
// src is the attribute of video tag and we are assigning value to it which we are creating using URL.createObjectURL function
video.src = videoURL;
playPauseBtn.textContent = 'Play';
video.load();
});
// Play/Pause video when user click on play/pause button
playPauseBtn.addEventListener('click', () => {
if (video.paused) {
// play() is js inbuild function
video.play();
playPauseBtn.textContent = 'Pause';
} else {
// pause() is js inbuild function
video.pause();
playPauseBtn.textContent = 'Play';
}
});
// Stop video when user click on stop button
stopBtn.addEventListener('click', () => {
video.pause();
video.currentTime = 0;
playPauseBtn.textContent = 'Play';
});
// Mute/Unmute video when user click on mute/unmute button
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
// here we are using contidional statement to set texcontent of mute button
muteBtn.textContent = video.muted ? 'Unmute' : 'Mute';
});
// Increase volume when user click on volume up button
volumeUpBtn.addEventListener('click', () => {
if (video.volume < 1) video.volume += 0.1;
});
// Decrease volume when user click on volume down button
volumeDownBtn.addEventListener('click', () => {
if (video.volume > 0) video.volume -= 0.1;
});
Output:-
