Untitled

<video
        id="myVideo"
        ontimeupdate="myFunction(this)"
        onplay="startVideo(this)"
      >
        <source
          class="lady-killers"
          src="./assets/video/The.Ladykillers.2004.720p.YIFY.Sermovie.mp4"
        />
        Your browser does not support the video tag.
      </video>
      <div class="progress-bar">
        <progress class="range" id="range" value="0"></progress>
      </div>
      <section class="controller">
        <div class="left-buttons">
          <img
            class="playBtn"
            src="./assets/video player assets/white-play-icon-png-6.webp"
            width="25px"
            alt=""
          />
          <img
            src="./assets/video player assets/next-video.png"
            width="20px"
            alt=""
          />
          <img
            id="mute"
            src="./assets/video player assets/images.png"
            width="20px"
            alt=""
          />
        </div>
        <div class="right-buttons">
          <img src="./assets/video player assets/C-C.png" width="20px" alt="" />

          <img
            src="./assets/video player assets/settings.png"
            width="20px"
            alt=""
          />
          <img
            src="./assets/video player assets/mini-display.png"
            width="20px"
            alt=""
          />
          <img
            src="./assets/video player assets/rectangle.png"
            width="25px"
            alt=""
          />
          <img
            onclick="openFullscreen(this)"
            id="full-screen"
            src="./assets/video player assets/fullscreen.png"
            width="20px"
            alt=""
          />
        </div>
      </section>


.main-player {
  display: flex;
  flex-direction: column;
  width: 60vw;
  margin: 5rem auto;
}

.controller {
  position: relative;
  display: none;
  background: transparent;
  justify-content: space-between;
  top: -4rem;
}

.main-player:hover .controller,
.main-player:hover .progress-bar {
  display: flex;
}

.progress-bar {
  display: none;

  position: relative;
  top: -5rem;
  z-index: 10000000;
}

.progress-bar progress {
  width: 100%;
}

.left-buttons,
.right-buttons {
  display: flex;
  padding: 0 40px;
  gap: 2.5rem;
}

.full-screen {
  display: flex;
  position: relative;
  justify-content: space-between;
  top: 4rem;
}


const body = document.getElementsByTagName("body");
const video = document.getElementById("myVideo");

const player = document.getElementById("main--player");
const fullScreen = document.getElementById("full-screen");

const muteBtn = document.getElementById("mute");

const progressBar = document.getElementById("range");
const playBottun = document.querySelector(".playBtn");

const duration = video.duration;

let start;

function startVideo(event) {
  start = event.currentTime;
}

fullScreen.addEventListener("click", function () {
  body.scrollTop;
});

function myFunction(event) {
  const current = event.currentTime;
  const duration = event.duration;
  if (duration) {
    const progress = ((current - start) / duration) * 100;
    progressBar.setAttribute("value", progress);
    progressBar.setAttribute("max", 100);
  }
}

playBottun.addEventListener("click", function () {
  if (video.paused) {
    video.play();
    playBottun.innerHTML = "Pause";
    playBottun.src = "./assets/video player assets/pause.png";
  } else {
    video.pause();
    playBottun.innerHTML = "Play";
    playBottun.src = "./assets/video player assets/white-play-icon-png-6.webp";
  }
});

video.addEventListener("click", function () {
  if (video.paused) {
    video.play();
    playBottun.innerHTML = "Pause";
    playBottun.src = "./assets/video player assets/pause.png";
  } else {
    video.pause();
    playBottun.innerHTML = "Play";
    playBottun.src = "./assets/video player assets/white-play-icon-png-6.webp";
  }
});

muteBtn.addEventListener("click", function () {
  if (video.volume) {
    video.volume = 0;
    muteBtn.src = "./assets/video player assets/mute-speaker.png";
  } else {
    video.volume = 1;
    muteBtn.src = "./assets/video player assets/images.png";
  }
});

function openFullscreen(event) {
  if (player.requestFullscreen) {
    player.requestFullscreen(event);
  } else if (player.webkitRequestFullscreen) {
    /* Safari */
    player.webkitRequestFullscreen(event);
  } else if (player.msRequestFullscreen) {
    /* IE11 */
    player.msRequestFullscreen();
  }
}