How to create custom video player using HTML, CSS & JavaScript (No Plugin) All Parts

//*Youtube Gallery 2022*//

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

video::cue {
  opacity: 0;
}

.caption_text {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 90%;
  max-width: 90%;
  transform: translate(-50%, -50%);
  text-align: center;
  user-select: none;
  transition: bottom 0.3s;
}

.caption_text.active {
  bottom: 0%;
}

.caption_text mark {
  background-color: #0000008f !important;
  color: #fff;
}


.material-icons {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}


section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 51px);
  width: 100%;
  padding: 1.7%;
}

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

/* Video player Styling */
.container #video_player {
  position: relative;
  width: 700px;
  height: 100%;
  background: #000;
  overflow: hidden;
}
.container #video_player .loader{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 60px;
  height: 60px;
  border: 4px solid #fff;
  border-bottom-color: transparent;
  border-radius: 50%;
  z-index: 1;
  animation: animate 0.6s linear infinite;
  display: none;
}
@keyframes animate{
  0%{
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100%{
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
.container #video_player .thumbnail{
  position: absolute;
  bottom: 80px;
  left: calc(var(--x) + 11px);
  transform: translateX(-50%);
  width: 165px;
  height: 90px;
  background: #fff;
  border: 2px solid #fff;
  border-radius: 3px;
  display: none;
}
.container #video_player #main-video {
  position: relative;
  width: 100%;
  height: 100%;
  outline: none;
}

#video_player .progressAreaTime {
  position: absolute;
  left: calc(var(--x) + 11px);
  transform: translateX(-50%);
  bottom: 50px;
  min-width: 60px;
  text-align: center;
  white-space: nowrap;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  z-index: 1;
  display: none;
}

.container #video_player .controls {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: rgb(0 0 0 / 29%);
  box-shadow: 0 0 40px 10px rgb(0 0 0 / 25%);
  z-index: 3;
  transform: translateY(180%);
  transition: 0.3s;
  padding: 0px 10px;
}

.container #video_player .controls.active {
  transform: translateY(0);
}

#video_player .controls .progress-area {
  width: 100%;
  height: 5px;
  margin: auto;
  background: #f0f0f063;
  cursor: pointer;
  position: relative;
}

.controls .progress-area .progress-bar {
  position: relative;
  width: 0%;
  background: rgb(255, 174, 0);
  height: inherit;
  border-radius: inherit;
  cursor: pointer;
}

.controls .progress-area .progress-bar::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  background: rgb(255, 174, 0);
}

.controls .progress-area .bufferedBar{
  position: absolute;
  top: 0%;
  right: 0%;
  width: 100%;
  height: inherit;
}

.controls .controls-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  width: 97%;
  height: 46px;
  margin: 0 auto;
}

.controls .controls-list .controls-left,
.controls .controls-list .controls-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.controls .controls-left .timer {
  display: inline-block;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
  margin-left: 5px;
  text-align: center;
}

.controls .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-left: 8px;
  margin-right: 5px;
}

.controls .icon .material-icons {
  font-size: 26px;
  color: #fff;
  cursor: pointer;
}

.controls .icon .material-icons.fast-rewind:active {
  transition: 0.2s;
  transform: rotate(-45deg);
}

.controls .icon .material-icons.fast-forward:active {
  transition: 0.2s;
  transform: rotate(45deg);
}

.controls .icon .volume_range {
  -webkit-appearance: none;
  appearance: none;
  width: 0px;
  height: 3px;
  background: #fff;
  color: #fff;
  cursor: pointer;
  outline: none;
  border: none;
  transition: 0.4s;
}

.controls .icon .volume_range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  outline: none;
  background: #fff;
  color: #fff;
  opacity: 0;
  transition: 0.3s;
}

.controls .icon:hover .volume_range {
  display: inline-block;
  width: 60px;
}

.controls .icon:hover .volume_range::-webkit-slider-thumb {
  opacity: 1;
  pointer-events: auto;
  transition: 0.5s;
}

.controls-right .icon .auto-play {
  width: 30px;
  height: 10px;
  border-radius: 20px;
  position: relative;
  margin-right: 8px !important;
  background: #b6b6b6;
}

.controls-right .icon .auto-play::before {
  content: "\e034";
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 14px;
  background: #727272;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 50%;
  font-family: "Material Icons";
}

.controls-right .icon .auto-play.active::before {
  content: "\e037";
  left: 15px;
  font-family: "Material Icons";
}

.controls-right .icon .material-icons.settingsBtn {
  font-size: 24px;
  transition: 0.3s;
}

.controls-right .icon .settingsBtn.active {
  transform: rotate(45deg);
}
 
#video_player #captions,
#video_player #settings {
  position: absolute;
  right: 25px;
  bottom: 62px;
  background: rgb(28 28 28 / 90%);
  width: 200px;
  max-height: 250px;
  height: auto;
  color: #fff;
  overflow-y: auto;
  z-index: 20;
  display: none;
  border-radius: 5px;
}
 
#video_player #captions.active,
#video_player #settings.active {
  display: block;
}
 
#video_player #captions .caption span,
#video_player #settings > div > span {
  font-size: 14px;
  font-weight: 300;
  padding: 15px 30px;
  border-bottom: 1px solid rgb(83, 83, 83);
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
}
#video_player #settings > div .icon{
  font-size: 14px;
  margin: 0 5px;
  cursor: pointer;
}
#video_player #settings > div ul li span{
 pointer-events: none;
}

#video_player #captions .caption ul,
#video_player #settings > div ul {
  position: relative;
}

#video_player #captions .caption ul li,
#video_player #settings > div ul li {
  position: relative;
  width: 100%;
  cursor: pointer;
  text-align: left;
  padding: 12px 33px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

 #video_player #captions .caption ul li:hover,
 #video_player #settings > div ul li:hover {
  background: rgba(28, 28, 28, 0.9);
}

#video_player #captions .caption ul li.active::before,
#video_player #settings > div ul li.active::before {
  content: "\e876";
  font-family: "Material Icons";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  padding-right: 10px;
  font-size: 18px;
}

#video_player #captions::-webkit-scrollbar,
#video_player #settings::-webkit-scrollbar {
  width: 8px;
  background: transparent;
}

#video_player #captions::-webkit-scrollbar-thumb,
#video_player #settings::-webkit-scrollbar-thumb {
  height: 20px;
  border: 2px solid transparent;
  background: rgba(83, 83, 83, 0.9);
  border-radius: 20px;
}

footer {
  padding: 15px 23px;
  background: #1b1b1a;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

footer a {
  color: crimson;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

@media (max-width: 430px) {
  .container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  

  .controls .icon {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 24px;
  }

  .volume,
  .volume_range,
  .auto-play,
  .fast-forward,
  .picture_in_picutre {
    display: none;
  }
}

Java Script for post blogger Style Play

   <script>
//<![CDATA[
// let's select all required tags or elements
const video_player = document.querySelector("#video_player"),
  mainVideo = video_player.querySelector("#main-video"),
  progressAreaTime = video_player.querySelector(".progressAreaTime"),
  controls = video_player.querySelector(".controls"),
  progressArea = video_player.querySelector(".progress-area"),
  bufferedBar = video_player.querySelector(".bufferedBar"),
  progress_Bar = video_player.querySelector(".progress-bar"),
  fast_rewind = video_player.querySelector(".fast-rewind"),
  play_pause = video_player.querySelector(".play_pause"),
  fast_forward = video_player.querySelector(".fast-forward"),
  volume = video_player.querySelector(".volume"),
  volume_range = video_player.querySelector(".volume_range"),
  current = video_player.querySelector(".current"),
  totalDuration = video_player.querySelector(".duration"),
  auto_play = video_player.querySelector(".auto-play"),
  settingsBtn = video_player.querySelector(".settingsBtn"),
  captionsBtn = video_player.querySelector(".captionsBtn"),
  picture_in_picutre = video_player.querySelector(".picture_in_picutre"),
  fullscreen = video_player.querySelector(".fullscreen"),
  settings = video_player.querySelector("#settings"),
  settingHome = video_player.querySelectorAll("#settings [data-label='settingHome'] > ul > li"),
  captions = video_player.querySelector("#captions"),
  caption_labels = video_player.querySelector("#captions ul"),
  playback = video_player.querySelectorAll(".playback li"),
  tracks = video_player.querySelectorAll("track"),
  loader = video_player.querySelector(".loader");

// let thumbnail = video_player.querySelector(".thumbnail");
if (tracks.length != 0) {
  caption_labels.insertAdjacentHTML(
    "afterbegin",
    `<li data-track="OFF" class="active">OFF</li>`
  );
  for (let i = 0; i < tracks.length; i++) {
    trackLi = `<li data-track="${tracks[i].label}">${tracks[i].label}</li>`;
    caption_labels.insertAdjacentHTML("beforeend", trackLi);
  }
}
const caption = captions.querySelectorAll("ul li");

// Play video function
function playVideo() {
  play_pause.innerHTML = "pause";
  play_pause.title = "pause";
  video_player.classList.add("paused");
  mainVideo.play();
}

// Pause video function
function pauseVideo() {
  play_pause.innerHTML = "play_arrow";
  play_pause.title = "play";
  video_player.classList.remove("paused");
  mainVideo.pause();
}

play_pause.addEventListener("click", () => {
  const isVideoPaused = video_player.classList.contains("paused");
  isVideoPaused ? pauseVideo() : playVideo();
});

mainVideo.addEventListener("play", () => {
  playVideo();
});

mainVideo.addEventListener("pause", () => {
  pauseVideo();
});

// fast_rewind video function
fast_rewind.addEventListener("click", () => {
  mainVideo.currentTime -= 10;
});

// fast_forward video function
fast_forward.addEventListener("click", () => {
  mainVideo.currentTime += 10;
});

// Load video duration
mainVideo.addEventListener("loadeddata", (e) => {
  let videoDuration = e.target.duration;
  let totalMin = Math.floor(videoDuration / 60);
  let totalSec = Math.floor(videoDuration % 60);

  // if seconds are less then 10 then add 0 at the begning
  totalSec < 10 ? (totalSec = "0" + totalSec) : totalSec;
  totalDuration.innerHTML = `${totalMin} : ${totalSec}`;
});

// Current video duration
mainVideo.addEventListener("timeupdate", (e) => {
  let currentVideoTime = e.target.currentTime;
  let currentMin = Math.floor(currentVideoTime / 60);
  let currentSec = Math.floor(currentVideoTime % 60);
  // if seconds are less then 10 then add 0 at the begning
  currentSec < 10 ? (currentSec = "0" + currentSec) : currentSec;
  current.innerHTML = `${currentMin} : ${currentSec}`;

  let videoDuration = e.target.duration;
  // progressBar width change
  let progressWidth = (currentVideoTime / videoDuration) * 100 + 0.5;
  progress_Bar.style.width = `${progressWidth}%`;
});

// let's update playing video current time on according to the progress bar width

progressArea.addEventListener("pointerdown", (e) => {
  progressArea.setPointerCapture(e.pointerId);
  setTimelinePosition(e);
  progressArea.addEventListener("pointermove",setTimelinePosition);
  progressArea.addEventListener("pointerup",()=>{
    progressArea.removeEventListener("pointermove",setTimelinePosition);
  })
});


function setTimelinePosition(e) {
  let videoDuration = mainVideo.duration;
  let progressWidthval = progressArea.clientWidth + 2;
  let ClickOffsetX = e.offsetX;
  mainVideo.currentTime = (ClickOffsetX / progressWidthval) * videoDuration;
  
  let progressWidth = (mainVideo.currentTime / videoDuration) * 100 + 0.5;
  progress_Bar.style.width = `${progressWidth}%`;
  
  let currentVideoTime = mainVideo.currentTime;
  let currentMin = Math.floor(currentVideoTime / 60);
  let currentSec = Math.floor(currentVideoTime % 60);
  // if seconds are less then 10 then add 0 at the begning
  currentSec < 10 ? (currentSec = "0" + currentSec) : currentSec;
  current.innerHTML = `${currentMin} : ${currentSec}`;
}

function drawProgress(canvas,buffered,duration) {
  let context = canvas.getContext('2d',{antialias : false});
  context.fillStyle="#ffffffe6";

  let height = canvas.height;
  let width = canvas.width;
  if(!height || !width) throw "Canva's width or height or not set.";
  context.clearRect(0,0,width,height);
  for (let i = 0; i < buffered.length; i++) {
    let leadingEdge = buffered.start(i) / duration * width;
    let trailingEdge = buffered.end(i) / duration * width;
    context.fillRect(leadingEdge, 0, trailingEdge - leadingEdge, height)
  }
}

mainVideo.addEventListener('progress',()=>{
  drawProgress(bufferedBar, mainVideo.buffered, mainVideo.duration);
})

mainVideo.addEventListener('waiting', () => {
  loader.style.display = "block";
})

mainVideo.addEventListener('canplay', () => {
  loader.style.display = "none";
})


// change volume
function changeVolume() {
  mainVideo.volume = volume_range.value / 100;
  if (volume_range.value == 0) {
    volume.innerHTML = "volume_off";
  } else if (volume_range.value < 40) {
    volume.innerHTML = "volume_down";
  } else {
    volume.innerHTML = "volume_up";
  }
}

function muteVolume() {
  if (volume_range.value == 0) {
    volume_range.value = 80;
    mainVideo.volume = 0.8;
    volume.innerHTML = "volume_up";
  } else {
    volume_range.value = 0;
    mainVideo.volume = 0;
    volume.innerHTML = "volume_off";
  }
}

volume_range.addEventListener("change", () => {
  changeVolume();
});

volume.addEventListener("click", () => {
  muteVolume();
});

// Update progress area time and display block on mouse move
progressArea.addEventListener("mousemove", (e) => {
  let progressWidthval = progressArea.clientWidth + 2;
  let x = e.offsetX;
  let videoDuration = mainVideo.duration;
  let progressTime = Math.floor((x / progressWidthval) * videoDuration);
  let currentMin = Math.floor(progressTime / 60);
  let currentSec = Math.floor(progressTime % 60);
  progressAreaTime.style.setProperty("--x", `${x}px`);
  progressAreaTime.style.display = "block";
  if (x >= progressWidthval - 80) {
    x = progressWidthval - 80;
  } else if (x <= 75) {
    x = 75;
  } else {
    x = e.offsetX;
  }

  // if seconds are less then 10 then add 0 at the begning
  currentSec < 10 ? (currentSec = "0" + currentSec) : currentSec;
  progressAreaTime.innerHTML = `${currentMin} : ${currentSec}`;

  // If you want to show your video thumbnail on progress Bar hover then comment out the following code. Make sure that you are using video from same domain where you hosted your webpage.

  // thumbnail.style.setProperty("--x", `${x}px`);
  // thumbnail.style.display = "block";

  // for (var item of thumbnails) {
  //   //
  //   var data = item.sec.find(x1 => x1.index === Math.floor(progressTime));

  //   // thumbnail found
  //   if (data) {
  //     if (item.data != undefined) {
  //       thumbnail.setAttribute("style", `background-image: url(${item.data});background-position-x: ${data.backgroundPositionX}px;background-position-y: ${data.backgroundPositionY}px;--x: ${x}px;display: block;`)

  //       // exit
  //       return;
  //     }
  //   }
  // }
});

progressArea.addEventListener("mouseleave", () => {
  // If you want to show your video thumbnail on progress Bar hover then comment out the following code. Make sure that you are using video from same domain where you hosted your webpage.

  // thumbnail.style.display = "none";
  progressAreaTime.style.display = "none";
});

// Auto play
auto_play.addEventListener("click", () => {
  auto_play.classList.toggle("active");
  if (auto_play.classList.contains("active")) {
    auto_play.title = "Autoplay is on";
  } else {
    auto_play.title = "Autoplay is off";
  }
});

mainVideo.addEventListener("ended", () => {
  if (auto_play.classList.contains("active")) {
    playVideo();
  } else {
    play_pause.innerHTML = "replay";
    play_pause.title = "Replay";
  }
});

// Picture in picture

picture_in_picutre.addEventListener("click", () => {
  mainVideo.requestPictureInPicture();
});

// Full screen function

fullscreen.addEventListener("click", () => {
  if (!video_player.classList.contains("openFullScreen")) {
    video_player.classList.add("openFullScreen");
    fullscreen.innerHTML = "fullscreen_exit";
    video_player.requestFullscreen();
  } else {
    video_player.classList.remove("openFullScreen");
    fullscreen.innerHTML = "fullscreen";
    document.exitFullscreen();
  }
});

// Open settings
settingsBtn.addEventListener("click", () => {
  settings.classList.toggle("active");
  settingsBtn.classList.toggle("active");
  if (
    captionsBtn.classList.contains("active") ||
    captions.classList.contains("active")
  ) {
    captions.classList.remove("active");
    captionsBtn.classList.remove("active");
  }
});
// Open caption
captionsBtn.addEventListener("click", () => {
  captions.classList.toggle("active");
  captionsBtn.classList.toggle("active");
  if (
    settingsBtn.classList.contains("active") ||
    settings.classList.contains("active")
  ) {
    settings.classList.remove("active");
    settingsBtn.classList.remove("active");
  }
});

// Playback Rate

playback.forEach((event) => {
  event.addEventListener("click", () => {
    removeActiveClasses(playback);
    event.classList.add("active");
    let speed = event.getAttribute("data-speed");
    mainVideo.playbackRate = speed;
  });
});

caption.forEach((event) => {
  event.addEventListener("click", () => {
    removeActiveClasses(caption);
    event.classList.add("active");
    changeCaption(event);
    caption_text.innerHTML = "";
  });
});

let track = mainVideo.textTracks;

function changeCaption(lable) {
  let trackLable = lable.getAttribute("data-track");
  for (let i = 0; i < track.length; i++) {
    track[i].mode = "disabled";
    if (track[i].label == trackLable) {
      track[i].mode = "showing";
    }
  }
}

const settingDivs = video_player.querySelectorAll('#settings > div');
const settingBack = video_player.querySelectorAll('#settings > div .back_arrow');
const quality_ul = video_player.querySelector("#settings > [data-label='quality'] ul");
const qualities = video_player.querySelectorAll("source[size]");

qualities.forEach(event=>{
  let quality_html = `<li data-quality="${event.getAttribute('size')}">${event.getAttribute('size')}p</li>`;
  quality_ul.insertAdjacentHTML('afterbegin',quality_html);
})

const quality_li = video_player.querySelectorAll("#settings > [data-label='quality'] ul > li");
quality_li.forEach((event)=>{
  event.addEventListener('click',(e)=>{
    let quality = event.getAttribute('data-quality');
    removeActiveClasses(quality_li);
    event.classList.add('active');
    qualities.forEach(event=>{
      if (event.getAttribute('size') == quality) {
        let video_current_duration = mainVideo.currentTime;
        let video_source = event.getAttribute('src');
        mainVideo.src = video_source;
        mainVideo.currentTime = video_current_duration;
        playVideo();
      }
    })
  })
})

settingBack.forEach((event)=>{
  event.addEventListener('click',(e)=>{
    let setting_label = e.target.getAttribute('data-label');
    for (let i = 0; i < settingDivs.length; i++) {
      if (settingDivs[i].getAttribute('data-label') == setting_label) {
        settingDivs[i].removeAttribute('hidden');
      }else{
        settingDivs[i].setAttribute('hidden',"");
      }
    }
  })
})

settingHome.forEach((event)=>{
  event.addEventListener('click',(e)=>{
    let setting_label = e.target.getAttribute('data-label');
    for (let i = 0; i < settingDivs.length; i++) {
      if (settingDivs[i].getAttribute('data-label') == setting_label) {
        settingDivs[i].removeAttribute('hidden');
      }else{
        settingDivs[i].setAttribute('hidden',"");
      }
    }
  })
})


function removeActiveClasses(e) {
  e.forEach((event) => {
    event.classList.remove("active");
  });
}

let caption_text = video_player.querySelector(".caption_text");
for (let i = 0; i < track.length; i++) {
  track[i].addEventListener("cuechange", () => {
    if (track[i].mode === "showing") {
      if (track[i].activeCues[0]) {
        let span = `<span><mark>${track[i].activeCues[0].text}</mark></span>`;
        caption_text.innerHTML = span;
      } else {
        caption_text.innerHTML = "";
      }
    }
  });
}

//  blob url
let mainVideoSources = mainVideo.querySelectorAll("source");
for (let i = 0; i < mainVideoSources.length; i++) {
  let videoUrl = mainVideoSources[i].src;
  blobUrl(mainVideoSources[i], videoUrl);
}
function blobUrl(video, videoUrl) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", videoUrl);
  xhr.responseType = "arraybuffer";
  xhr.onload = (e) => {
    let blob = new Blob([xhr.response]);
    let url = URL.createObjectURL(blob);
    video.src = url;
  };
  xhr.send();
}

mainVideo.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

// Mouse move controls
video_player.addEventListener("mouseenter", () => {
  controls.classList.add("active");
  if (tracks.length != 0) {
    caption_text.classList.remove("active");
  }
});

video_player.addEventListener("mouseleave", () => {
  if (video_player.classList.contains("paused")) {
    if (
      settingsBtn.classList.contains("active") ||
      captionsBtn.classList.contains("active")
    ) {
      controls.classList.add("active");
    } else {
      controls.classList.remove("active");
      if (tracks.length != 0) {
        caption_text.classList.add("active");
      }
    }
  } else {
    controls.classList.add("active");
  }
});

if (video_player.classList.contains("paused")) {
  if (
    settingsBtn.classList.contains("active") ||
    captionsBtn.classList.contains("active")
  ) {
    controls.classList.add("active");
  } else {
    controls.classList.remove("active");
    if (tracks.length != 0) {
      caption_text.classList.add("active");
    }
  }
} else {
  controls.classList.add("active");
}

// mobile touch controls
video_player.addEventListener(
  "touchstart",
  () => {
    controls.classList.add("active");
    setTimeout(() => {
      controls.classList.remove("active");
      if (tracks.length != 0) {
        caption_text.classList.add("active");
      }
    }, 8000);
  },
  { passive: true }
);

video_player.addEventListener(
  "touchmove",
  () => {
    if (video_player.classList.contains("paused")) {
      controls.classList.remove("active");
      if (tracks.length != 0) {
        caption_text.classList.add("active");
      }
    } else {
      controls.classList.add("active");
    }
  },
  { passive: true }
);
if (tracks.length == 0) {
  caption_labels.remove();
  captions.remove();
  captionsBtn.parentNode.remove();
}

// If you want to show your video thumbnail on progress Bar hover then comment out the following code. Make sure that you are using video from same domain where you hosted your webpage.

//  Video Preview
// var thumbnails = [];

// var thumbnailWidth = 158;
// var thumbnailHeight = 90;
// var horizontalItemCount = 5;
// var verticalItemCount = 5;

// let preview_video = document.createElement('video')
// preview_video.preload = "metadata";
// preview_video.width = "500";
// preview_video.height = "300"
// preview_video.controls = true;
// preview_video.src = mainVideo.querySelector("source").src;
// preview_video.addEventListener("loadeddata", async function () {
//   //
//   preview_video.pause();

//   //
//   var count = 1;

//   //
//   var id = 1;

//   //
//   var x = 0,
//     y = 0;

//   //
//   var array = [];

//   //
//   var duration = parseInt(preview_video.duration);
//   //
//   for (var i = 1; i <= duration; i++) {
//     array.push(i);
//   }

//   //
//   var canvas;

//   //
//   var i, j;

//   for (i = 0, j = array.length; i < j; i += horizontalItemCount) {
//     //
//     for (var startIndex of array.slice(i, i + horizontalItemCount)) {
//       //
//       var backgroundPositionX = x * thumbnailWidth;

//       //
//       var backgroundPositionY = y * thumbnailHeight;

//       //
//       var item = thumbnails.find((x) => x.id === id);

//       if (!item) {
//         //

//         //
//         canvas = document.createElement("canvas");

//         //
//         canvas.width = thumbnailWidth * horizontalItemCount;
//         canvas.height = thumbnailHeight * verticalItemCount;

//         //
//         thumbnails.push({
//           id: id,
//           canvas: canvas,
//           sec: [
//             {
//               index: startIndex,
//               backgroundPositionX: -backgroundPositionX,
//               backgroundPositionY: -backgroundPositionY,
//             },
//           ],
//         });
//       } else {
//         //

//         //
//         canvas = item.canvas;

//         //
//         item.sec.push({
//           index: startIndex,
//           backgroundPositionX: -backgroundPositionX,
//           backgroundPositionY: -backgroundPositionY,
//         });
//       }

//       //
//       var context = canvas.getContext("2d");

//       //
//       preview_video.currentTime = startIndex;

//       //
//       await new Promise(function (resolve) {
//         var event = function () {
//           //
//           context.drawImage(
//             preview_video,
//             backgroundPositionX,
//             backgroundPositionY,
//             thumbnailWidth,
//             thumbnailHeight
//           );

//           //
//           x++;

//           // removing duplicate events
//           preview_video.removeEventListener("canplay", event);

//           //
//           resolve();
//         };

//         //
//         preview_video.addEventListener("canplay", event);
//       });

//       // 1 thumbnail is generated completely
//       count++;
//     }

//     // reset x coordinate
//     x = 0;

//     // increase y coordinate
//     y++;

//     // checking for overflow
//     if (count > horizontalItemCount * verticalItemCount) {
//       //
//       count = 1;

//       //
//       x = 0;

//       //
//       y = 0;

//       //
//       id++;
//     }
//   }
//   console.log(thumbnails);
//   // looping through thumbnail list to update thumbnail
//   thumbnails.forEach(function (item) {
//     // converting canvas to blob to get short url
//     item.canvas.toBlob((blob) => (item.data = URL.createObjectURL(blob)), "image/jpeg");
//     // deleting unused property
//     delete item.canvas;
//   });

//   console.log("done...");
// });


//]]>
</script>
  
  

You Can post Code HTML for Blogger

  

  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

  <title>Video Player</title>
  <!-- S-Tech04 -->
  <!-- www.youtube.com/c/STech04 -->

  <section>
    <div class="container">
      <div id="video_player">
        <div class="loader"></div>
        <video preload="metadata" id="main-video">
          <source src="https://drive.google.com/uc?export=download&id=1BtmmtEcgDHZt_ZBmsC07DG34dDLsv8Oa" size="480" type="video/mp4">
          <source src="https://drive.google.com/uc?export=download&id=1BtmmtEcgDHZt_ZBmsC07DG34dDLsv8Oa" size="720" type="video/mp4">
          <source src="https://drive.google.com/uc?export=download&id=1BtmmtEcgDHZt_ZBmsC07DG34dDLsv8Oa" size="1080" type="video/mp4">
          <track id="track1" label="English" kind="subtitles" src="./How To Get Started With VSCode.vtt" srclang="en">
          <track id="track2" label="Urdu" kind="subtitles" src="./test.vtt" srclang="en">
        </video>
        <p class="caption_text"></p>
        <!-- <div class="thumbnail"></div> -->

        <div class="progressAreaTime" >0:00</div>
        
        <div class="controls">
          <div class="progress-area">
            <canvas class="bufferedBar"></canvas>
            <div class="progress-bar">
              <span></span>
            </div>
          </div>

          <div class="controls-list">
            <div class="controls-left">
              <span class="icon">
                <i class="material-icons fast-rewind">replay_10</i>
              </span>

              <span class="icon">
                <i class="material-icons play_pause" >play_arrow</i>
              </span>

              <span class="icon">
                <i class="material-icons fast-forward">forward_10</i>
              </span>

              <span class="icon">
                <i class="material-icons volume">volume_up</i>

                <input type="range" min="0" max="100" class="volume_range" />
              </span>

              <div class="timer">
                <span class="current">0:00</span> /
                <span class="duration">0:00</span>
              </div>
            </div>

            <div class="controls-right">
              <span class="icon">
                <i class="material-icons auto-play"></i>
              </span>

              <span class="icon">
                <i class="material-icons captionsBtn">closed_caption</i>
              </span>

              <span class="icon">
                <i class="material-icons settingsBtn">settings</i>
              </span>

              <span class="icon">
                <i class="material-icons picture_in_picutre">picture_in_picture_alt</i>
              </span>

              <span class="icon">
                <i class="material-icons fullscreen">fullscreen</i>
              </span>
            </div>
          </div>
        </div>

        <div id="settings">
          <div data-label="settingHome">
            <ul>
              <li data-label="speed">
                <span> Speed </span>
                <span class="material-symbols-outlined icon">
                  arrow_forward_ios
                </span>
              </li>
              <li data-label="quality">
                <span> Quality </span>
               <span class="material-symbols-outlined icon">
                arrow_forward_ios
              </span>
              </li>
            </ul>
          </div>
          <div class="playback" data-label="speed" hidden>
            <span>
              <i class="material-symbols-outlined icon back_arrow"  data-label="settingHome">
                arrow_back
              </i>
              <span>Playback Speed </span>
            </span>
            <ul>
              <li data-speed="0.25">0.25</li>

              <li data-speed="0.5">0.5</li>

              <li data-speed="0.75">0.75</li>

              <li data-speed="1" class="active">Normal</li>

              <li data-speed="1.25">1.25</li>

              <li data-speed="1.5">1.5</li>

              <li data-speed="1.75">1.75</li>

              <li data-speed="2">2</li>
            </ul>
          </div>
          <div data-label="quality" hidden>
            <span>
              <i class="material-symbols-outlined icon back_arrow" data-label="settingHome">
                arrow_back
              </i>
              <span>Playback Quality </span>
            </span>
            <ul>
              <li data-quality="auto" class="active">auto</li>
            </ul>
          </div>
        </div>
        <div id="captions">
          <div class="caption">
            <span>Select Subtitle</span>
            <ul>
              
            </ul>
          </div>
        </div>
      </div>
    </div>
    
  </section>

  <footer>
    <span>Copyright &COPY; 2022
      <a href="www.youtube.com/c/STech04">S-Tech04</a> | All rights
      reserved</span>
  </footer>


  

  
  <!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" />
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <link rel="stylesheet" href="./style.css" />
  <title>Video Player</title>
  <!-- S-Tech04 -->
  <!-- www.youtube.com/c/STech04 -->
</head>
<body>
  <section>
    <div class="container">
      <div id="video_player">
        <div class="loader"></div>
        <video preload="metadata" id="main-video">
          <source src="How to add twak.to chat app in website-480p.mp4" size="480" type="video/mp4">
          <source src="How to add twak.to chat app in website-720p.mp4" size="720" type="video/mp4">
          <source src="How to add twak.to chat app in website-1080p.mp4" size="1080" type="video/mp4">
          <track id="track1" label="English" kind="subtitles" src="./How To Get Started With VSCode.vtt" srclang="en">
          <track id="track2" label="Urdu" kind="subtitles" src="./test.vtt" srclang="en">
        </video>
        <p class="caption_text"></p>
        <!-- <div class="thumbnail"></div> -->

        <div class="progressAreaTime" >0:00</div>
        
        <div class="controls">
          <div class="progress-area">
            <canvas class="bufferedBar"></canvas>
            <div class="progress-bar">
              <span></span>
            </div>
          </div>

          <div class="controls-list">
            <div class="controls-left">
              <span class="icon">
                <i class="material-icons fast-rewind">replay_10</i>
              </span>

              <span class="icon">
                <i class="material-icons play_pause" >play_arrow</i>
              </span>

              <span class="icon">
                <i class="material-icons fast-forward">forward_10</i>
              </span>

              <span class="icon">
                <i class="material-icons volume">volume_up</i>

                <input type="range" min="0" max="100" class="volume_range" />
              </span>

              <div class="timer">
                <span class="current">0:00</span> /
                <span class="duration">0:00</span>
              </div>
            </div>

            <div class="controls-right">
              <span class="icon">
                <i class="material-icons auto-play"></i>
              </span>

              <span class="icon">
                <i class="material-icons captionsBtn">closed_caption</i>
              </span>

              <span class="icon">
                <i class="material-icons settingsBtn">settings</i>
              </span>

              <span class="icon">
                <i class="material-icons picture_in_picutre">picture_in_picture_alt</i>
              </span>

              <span class="icon">
                <i class="material-icons fullscreen">fullscreen</i>
              </span>
            </div>
          </div>
        </div>

        <div id="settings">
          <div data-label="settingHome">
            <ul>
              <li data-label="speed">
                <span> Speed </span>
                <span class="material-symbols-outlined icon">
                  arrow_forward_ios
                </span>
              </li>
              <li data-label="quality">
                <span> Quality </span>
               <span class="material-symbols-outlined icon">
                arrow_forward_ios
              </span>
              </li>
            </ul>
          </div>
          <div class="playback" data-label="speed" hidden>
            <span>
              <i class="material-symbols-outlined icon back_arrow"  data-label="settingHome">
                arrow_back
              </i>
              <span>Playback Speed </span>
            </span>
            <ul>
              <li data-speed="0.25">0.25</li>

              <li data-speed="0.5">0.5</li>

              <li data-speed="0.75">0.75</li>

              <li data-speed="1" class="active">Normal</li>

              <li data-speed="1.25">1.25</li>

              <li data-speed="1.5">1.5</li>

              <li data-speed="1.75">1.75</li>

              <li data-speed="2">2</li>
            </ul>
          </div>
          <div data-label="quality" hidden>
            <span>
              <i class="material-symbols-outlined icon back_arrow" data-label="settingHome">
                arrow_back
              </i>
              <span>Playback Quality </span>
            </span>
            <ul>
              <li data-quality="auto" class="active">auto</li>
            </ul>
          </div>
        </div>
        <div id="captions">
          <div class="caption">
            <span>Select Subtitle</span>
            <ul>
              
            </ul>
          </div>
        </div>
      </div>
    </div>
    
  </section>

  <footer>
    <span>Copyright &COPY; 2022
      <a href="www.youtube.com/c/STech04">S-Tech04</a> | All rights
      reserved</span>
  </footer>
  <script src="./script.js"></script>
</body>

</html>