TheLazy.Dev
Portfolio GitHub

Blog

javascript |html |css |incoder

Custom Video Player Design using HTML, CSS and Javascript

incoderweb

Ashutosh Tiwari

Posted on March 22, 2022

Custom Video Player Design using HTML, CSS and Javascript

Hello friends, today in this blog you'll learn how to create a custom video player using HTML, CSS, and Javascript. In our previous blog, we saw how to create a responsive sidebar menu design using HTML, CSS, and Javascript. Now it's time to create a custom responsive video player. I've also shared many projects related to Javascript. So don't forget to check here.

An HTML5 video player is an element in HTML that can be used to stream video. It depends on the browser which video it supports. You can use this <video> tag to add any video in your HTML document.

You may like these:-

  • Cookie Consent Box Design
  • Responsive Accordion Design
  • Animated Product Preview Card Design
  • Custom Context or Right Click Menu Design

In this design [Custom Video Player] we have a video player in the middle of the page. when you hover on the video box, all controls will be shown with a smooth transition. On the top, it has a video time range with blue color and on the left bottom it has a volume range selector and in the center, it has video current duration and then play/pause and forward/backward buttons, and last but not the least fullscreen button.

Preview is available here.

HTML Code 

<!-- -------------- Created By InCoder -------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Vider Player - InCoder</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>

<body>
    <section>
        <div class="container">
            <div class="videoPlayer">
                <video src="https://doc-14-bk-docs.googleusercontent.com/docs/securesc/thiiuu0bci69ovl24g7628l8rt9f2fip/jo1c4d45uhe38r0cigteg5ooe6sba8m8/1647950250000/11303850701216825521/11303850701216825521/1UFNXxGajYvKrtcskaIuiZmzlbsRyAf9Q?e=view&ax=ACxEAsbRu5GA16JdqvuaJ2TqCy01HzF0pD8gyJ5ehwPUhDn5YnKbVgCNWDh0IHS3MhddYeVaqgJnMldH7k82AMOKLBoVfMYy3uQs2Wf9zCoD8QX9eWEZ4GM6yzTWjh3iv7D-zOZ5FX8AgRi0Svz3gnNHoCDEHZQDbL7yBoL8Zw60dUGgUSqpzg2IaqvfYS2EUxByq9KjCxXMXkCoeyi1aYA_WSdfmuInzxoPBYEUE6e3FKDITYLJfNDc8KWwzvpIp8qatTz0SwlamG5zPXh1CtcHOJ8Gh8OmBoV0RDD79IOi8cSetKlQiYzzPtYDTTbdWI6XPsUGeouO_koIZSVRGIe6NbzB0_hjC_uYLN_YCwnvVuJQsfSRu78AJGQzlYN6lXdaTGebzli9CsBN3mRKg7_lnNnXXDi1l7dH-zTqLzEzU3tqypLn29QevN7xsQqyzij2DiR955JJWuBOQ0nFRKBzKBecedu03fdJI7sP3yGK9g5E7DWOn9iZjyXWhELD0MuLGu9V9ksG3mCLyfxhfYibFKHB2YS_ts42SVePVw69EPHw_j0iGPVGCDNXnoC7J_mjqnPzFmWV5IfS8fQSPlwSK8xQTOYi52E8rPm4LOWnClcAFsdXrqs10yn0W9V6tQmBI1n--W34RDvbpXl-eQJUups-AiNd_cqZu1D4Cs73diziO2_zNmAdZKu8Fj-itYIipcsW7fvX4HtevQ&authuser=0&nonce=92kkcvff689ba&user=11303850701216825521&hash=g8nngkjiue6rjvc70qkjtmof3152cvg4"></video>
                <div class="videoProgressBar">
                    <div class="videoProgressDuration"></div>
                    <div class="dot"></div>
                </div>
                <div class="controls">
                    <div class="leftControls">
                        <div class="volume">
                            <i class="fa-solid fa-volume-high"></i>
                            <input type="range" value="100">
                        </div>
                    </div>
                    <div class="centerControls">
                        <div class="currentVideoDuration">
                            <p>00:00</p>
                        </div>

                        <div class="reverseVideo">
                            <i class="fa-solid fa-backward"></i>
                        </div>

                        <div class="playPauseBtn">
                            <i class="fa-solid fa-play playBtn"></i>
                            <i class="fa-solid fa-pause hide pauseBtn"></i>
                        </div>

                        <div class="forwardVideo">
                            <i class="fa-solid fa-forward"></i>
                        </div>

                        <div class="totalVideoDuration">
                            <p></p>
                        </div>
                    </div>
                    <div class="rightControls">
                        <div class="fullScrean">
                            <i class="fa-solid fa-expand"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code 

/* -------------- Created By InCoder -------------- */

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: rgba(0, 0, 0, 0.06);
}

section {
  width: 100%;
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.container .videoPlayer {
  height: 100%;
  display: flex;
  max-width: 700px;
  margin: 0px 10px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  border-radius: 0.3rem;
  justify-content: center;
}

.container .videoPlayer.active {
  box-shadow: 0px 0px 30px 0px rgba(255, 255, 255, 0.06);
}

.container .videoPlayer video {
  width: 100%;
  height: 100%;
  position: relative;
  border-radius: 0.3rem;
}

.controls {
  bottom: 0%;
  opacity: 0;
  height: 3rem;
  color: #fff;
  display: flex;
  min-width: 100%;
  max-width: 100%;
  position: relative;
  position: absolute;
  align-items: center;
  transition: all 0.2s;
  transform: translateY(5rem);
  justify-content: space-between;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8) 80%);
}

.videoPlayer.active .controls {
  opacity: 1;
  transform: translateY(0rem);
}

.videoPlayer .videoProgressBar {
  width: 94%;
  opacity: 0;
  bottom: 13%;
  display: flex;
  height: 0.3rem;
  cursor: pointer;
  border-radius: 5px;
  position: absolute;
  align-items: center;
  transition: all 0.2s;
  background-color: rgba(255, 255, 255, 0.7);
  transform: translateY(5rem);
}

.videoPlayer.active .videoProgressBar {
  opacity: 1;
  transition: all 0.2s;
  transform: translateY(0rem);
}

.videoPlayer .videoProgressBar.active,
.videoPlayer .videoProgressBar.active .videoProgressDuration {
  height: 0.4rem;
}

.videoPlayer .videoProgressBar .dot {
  left: 0%;
  width: 1.1rem;
  height: 1.1rem;
  max-width: 100%;
  position: absolute;
  border-radius: 50%;
  cursor: context-menu;
  background-color: #3968bf;
}

.videoPlayer .videoProgressBar .videoProgressDuration {
  width: 0%;
  height: 0.3rem;
  max-width: 100%;
  position: absolute;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: #3968bf;
}

.videoPlayer .controls i {
  color: #fff;
}

.leftControls,
.centerControls,
.rightControls {
  display: flex;
}

.controls .centerControls{
    margin-left: -2rem;
}

.controls .leftControls .volume {
  display: flex;
  font-size: 1rem;
  margin-left: 3rem;
  align-items: center;
  justify-content: center;
}

.controls .leftControls .volume i {
  cursor: pointer;
}

.controls .leftControls .volume input[type="range"] {
  width: 80%;
  height: 0.3rem;
  cursor: pointer;
  appearance: none;
  overflow: hidden;
  margin-left: 0.4rem;
  transition: all 0.2s;
  border-radius: 0.5rem;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.7);
}

.controls .leftControls .volume input[type="range"]:hover {
  height: 0.6rem;
}

.controls .leftControls .volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 40px;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: -100vw 0 0 100vw #3968bf;
  border: 2px solid #999;
}

.controls
  .leftControls
  .volume
  input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  color: #13bba4;
}

.controls .rightControls {
  margin-right: 2.5rem;
}

.controls .rightControls i {
  cursor: pointer;
  color: #fff;  
}

.controls .rightControls div {
  margin-left: 1rem;
}

.centerControls div{
    cursor: pointer;
    margin-left: .5rem;
    margin-right: .5rem;
}

.centerControls div:first-child{
    cursor: auto;
    margin-left: 0rem;
}

.centerControls div:last-child{
    cursor: auto;
    margin-right: 0rem;
}

.hide{
    display: none!important;
}

@media(max-width: 768px) {
    .leftControls{
        margin-left: -1.5rem!important;
    }

    .leftControls .volume{
        margin-right: 2.5rem;
    }

    .leftControls .volume input{
        display: none;
    }

    .centerControls{
    }

    .rightControls{
        margin-right: 1rem!important;
    }
}
Enter fullscreen mode Exit fullscreen mode

Javascript Code 

let video = document.querySelector('.videoPlayer video')
videoPlayer = document.querySelector('.videoPlayer')
videoProgressBar = document.querySelector('.videoProgressBar')
videoProgressDuration = document.querySelector('.videoProgressDuration')
dot = document.querySelector('.videoProgressBar .dot')
volume = document.querySelector('.leftControls .volume input[type=range]')
volIcon = document.querySelector('.leftControls .volume i')
fullScrean = document.querySelector('.fullScrean')
currentVideoDuration = document.querySelector('.currentVideoDuration p')
totalVideoDuration = document.querySelector('.totalVideoDuration p')
playBtn = document.querySelector('.playBtn')
pauseBtn = document.querySelector('.pauseBtn')
forwardVideo = document.querySelector('.forwardVideo')
reverseVideo = document.querySelector('.reverseVideo');

videoPlayer.addEventListener('mousemove', function () {
    this.classList.add('active');
});

videoPlayer.addEventListener('mousemove', function () {
    this.classList.add('active');
});

videoPlayer.addEventListener('mouseleave', function () {
    this.classList.remove('active');
});

video.addEventListener('timeupdate', function (e) {
    let videoPosition = video.currentTime / video.duration;
    dot.style.left = (videoPosition * 100) + '%';
    videoProgressDuration.style.width = (videoPosition * 100) + '%';
});

const i = setInterval(function() {
    if(video.readyState > 0) {
        var minutes = parseInt(video.duration / 60, 10);
        var seconds = Math.round(video.duration % 60);

        totalVideoDuration.innerText = minutes + ":" + seconds;
        clearInterval(i);
  }
}, 10);


videoProgressBar.addEventListener('click', function (e) {
    let videoDuration = video.duration;
    let progressWidthValue = this.clientWidth;
    let clickOffestX = e.offsetX;

    video.currentTime = (clickOffestX / progressWidthValue) * videoDuration;
});

fullScrean.addEventListener('click', function() {
    video.requestFullscreen();
});

video.addEventListener('timeupdate', function(e){
    let currentVideoTime = e.target.currentTime;
    let currentMin = Math.floor(currentVideoTime / 60);
    let currentSec = Math.floor(currentVideoTime % 60);

    currentMin < 10 ? currentMin = '0'+currentMin : currentMin;
    currentSec < 10 ? currentSec = '0'+currentSec : currentSec;
    currentVideoDuration.innerHTML = `${currentMin}:${currentSec}`
});

playBtn.addEventListener('click', function(){
    this.classList.toggle('hide');
    pauseBtn.classList.toggle('hide');
    video.play();
});

pauseBtn.addEventListener('click', function(){
    this.classList.toggle('hide');
    playBtn.classList.toggle('hide');
    video.pause();
});

reverseVideo.addEventListener('click', function(){
    video.currentTime -= 10;
});

forwardVideo.addEventListener('click', function(){
    video.currentTime += 10;
});

volume.addEventListener('change', function(){
    if(this.value < 20){
        volIcon.classList.remove('fa-volume-high');
        volIcon.classList.add('fa-volume-low');
    }else if(this.value > 20){
        volIcon.classList.remove('fa-volume-low');
        volIcon.classList.remove('fa-volume-xmark');
        volIcon.classList.add('fa-volume-high');
    }else if (this.value == 0){
        volIcon.classList.remove('fa-volume-low');
        volIcon.classList.add('fa-volume-xmark');
    }
    video.volume = this.value / 100;
});

document.querySelector('.fa-volume-high').addEventListener('click', function(){
    volIcon.classList.toggle('fa-volume-high');
    volIcon.classList.toggle('fa-volume-xmark');
    video.volume = 0;
});

volIcon.addEventListener('click', function(){
    volIcon.classList.toggle('fa-volume-xmark');
    volIcon.classList.toggle('fa-volume-high');
    video.volume = 1;
});

video.addEventListener('ended', function(){
    pauseBtn.classList.toggle('hide');
    playBtn.classList.toggle('hide');

    setTimeout(function(){
        video.currentTime = 0;
    }, 800);
});
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
incoderweb
Ashutosh Tiwari

Posted on March 22, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Random Password Generator in HTML, CSS, and Javascript
javascript Random Password Generator in HTML, CSS, and Javascript

April 13, 2022

Analog Clock Desing using HTML, CSS, and Javascript
javascript Analog Clock Desing using HTML, CSS, and Javascript

April 1, 2022

Responsive Animated Card Design using HTML and CSS Only
javascript Responsive Animated Card Design using HTML and CSS Only

March 31, 2022

How to Detect User Location using Javascript
javascript How to Detect User Location using Javascript

March 28, 2022

Custom Card Slider Using HTML, CSS, Javascript, and Owl Carousel Plugin
javascript Custom Card Slider Using HTML, CSS, Javascript, and Owl Carousel Plugin

March 24, 2022