Do you want to use HTML and CSS to make a video player? You don’t need to look any further since this article will walk you through creating a modern and useful video player.
Introduction
Our everyday lives now revolve around video material in every aspect, from entertainment to education to everything in between. An effective video player is now more necessary than ever due to the rising demand for video content.
Getting Started
Make sure we have everything we need before getting into the specifics of making a video player. A coding editor, a browser, and a working grasp of HTML and CSS are required.
The HTML Structure
We must first establish the HTML structure in order to develop a video player. A container element and many inner components, including a video element, play/pause button, volume control, and progress bar, make up the HTML structure of a video player. Let’s divide it into the following categories:
The Container Element
We call the outermost element that houses the full video player the container element. A div element with the class “video-container” will be created.
<div class="video-container">
<!-- Video player elements will be added here -->
</div>The Video Element
The video will be played in the video element. Within the container element, we will construct a video element and specify its URL, width, and height.
<video src="example.mp4" width="640" height="360"></video>The Play/Pause Button
The video may be started and stopped using the play/pause button. We will create a button element with the class “play-button”.
<button class="play-button"></button>The Volume Control
The user can change the video’s volume using the volume control. In addition to a button element with the class of volume-button and a div element with the class of volume-bar, we’ll build a div element with the class of volume-container.
<div class="volume-container">
<button class="volume-button"></button>
<div class="volume-bar"></div>
</div>The Progress Bar
The video’s playback progress is displayed on the progress bar. We’ll make a progress-container classed div element that will house a progress-bar classed div element.
<div class="progress-container">
<div class="progress-bar"></div>
</div>The CSS Styles
Let’s add CSS styles to the video player now that we have established the HTML framework so that it has the appropriate appearance and functionality.
The Container Element
We’ll use the display and flex attributes to center the video both horizontally and vertically in the video container element’s fixed width and height.
.video-container {
width: 640px;
height: 360px;
display: flex;
justify-content: center;
align-items: center;
}The Video Element
To make the video element responsive, we will set its width and height to 100% and auto, respectively. By utilising the controls property, we will also conceal the built-in video controls.
video {
width: 100%;
height: auto;
outline: none;
}The Play/Pause Button
Using CSS, we will style the play-button element to resemble a play button. When you press the button, JavaScript will use the play and stop functions to control the video.
.play-button {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid white;
border-bottom: 10px solid transparent;
cursor: pointer;
background-color: transparent;
}
.play-button:before {
content: "";
display: block;
position: absolute;
top: -10px;
left: -20px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid rgba(0, 0, 0, 0.4);
border-bottom: 10px solid transparent;
}
.play-button.playing:before {
border-left: 0;
border-right: 20px solid rgba(0, 0, 0, 0.4);
}The Volume Control
Using CSS and JavaScript, we will style the volume container, volume button, and volume-bar components so that the user may change the video’s volume.
.volume-container {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
align-items: center;
}
.volume-button {
width: 20px;
height: 20px;
cursor: pointer;
background-color: transparent;
border: none;
outline: none;
margin-right: 10px;
}
.volume-button:before {
content: "";
display: block;
position: absolute;
top: -8px;
left: -8px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-left: 16px solid white;
border-bottom: 8px solid transparent;
}
.volume-button:after {
content: "";
display: block;
position: absolute;
top: -6px;
left: -6px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 12px solid rgba(0, 0, 0, 0.4);
border-bottom: 6px solid transparent;
}
.volume-bar {
width: 50px;
height: 4px;
background-color: rgba(0, 0, 0, 0.4);
position: relative;
}
.volume-bar:before {
content: "";
display: block;
position: absolute;
top: -6px;
left: -10px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 10px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid white;
}
.volume-bar:after {
content: "";
display: block;
position: absolute;
top: -6px;
right: -10px;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 10px solid white;
border-bottom: 6px solid transparent;
}The Progress Bar
Using CSS, we’ll design the progress container and progress-bar elements to display the video’s progress as it plays.
.progress-container {
width: 100%;
height: 10px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
bottom: 0;
left: 0;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: white;
position: absolute;
top: 0;
left: 0;
}JavaScript will also be used to adjust the progress-bar element’s width as the video progresses.
const video = document.querySelector("video");
const playButton = document.querySelector(".play-button");
const volumeButton = document.querySelector(".volume-button");
const volumeBar = document.querySelector(".volume-bar");
const progressBar = document.querySelector(".progress-bar");
playButton.addEventListener("click", togglePlay);
volumeButton.addEventListener("click", toggleMute);
volumeBar.addEventListener("input", changeVolume);
video.addEventListener("timeupdate", updateProgress);
progressBar.addEventListener("click", setProgress);
function togglePlay() {
if (video.paused) {
video.play();
playButton.classList.add("playing");
} else {
video.pause();
playButton.classList.remove("playing");
}
}
function toggleMute() {
if (video.muted) {
video.muted = false;
volumeButton.classList.remove("muted");
} else {
video.muted = true;
volumeButton.classList.add("muted");
}
}
function changeVolume() {
video.volume = volumeBar.value / 100;
}
function updateProgress() {
const percentage = (video.currentTime / video.duration) * 100;
progressBar.style.width = `${percentage}%`;
}
function setProgress(event) {
const width = event.target.clientWidth;
const clickX = event.offsetX;
const duration = video.duration;
video.currentTime = (clickX / width) * duration;
}Conclusion
In this tutorial, we learned how to use HTML, CSS, and JavaScript to make a unique video player. We have addressed the fundamentals of video playback and added personalized controls for play/pause, volume, and progress monitoring. Now that you have this information, you may design a unique video player for your website or online application.
Follow Us on
https://www.linkedin.com/company/scribblers-den/
https://www.facebook.com/scribblersden.blogs
Read More
https://scribblersden.com/how-to-use-the-fs-module-in-node-js/
Thank You
