??? ??? ????? HTML, CSS ? JavaScript? ?? ??? ? ????. ?? ??? ??? ????. 1. ??? ?? ? ?? ??? ???? HTML? ???? ??? ??; 2. CSS? ???? ???? ???? ??? ??? ?????? ?? ??? ??????. 3. ??/?? ??, ?? ????, ??? ?? ???? ?? JavaScript? ?? ??? ??? ??????. 4. ???, ??, ??? ?? ? ??? ?????????. ?? ?????? ??? ??? ?? ??? ???? ?? ? ??? ??? ?????.

????! ??? ??? ????? ??? ???? ?? ??? ??? HTML, CSS ? JavaScript? ?? ? ??????. ???? ???? ??? ?? ??????.

?? ?? : HTML? ???? ??? ??? ??????

?? <video></video> ?? ? ?? ?? ??? ??? ?? HTML ??? ?????.

 <div class = "Video-container">
  <video class = "Custom-Video"src = "your-video.mp4"> </video>
  <div class = "Controls">
    <button class = "Play-Pause"> ? </button>
    <?? ?? = "??"class = "Seek-bar"value = "0">
    <span class = "time"> 00:00 / 00:00 < / span>
  </div>
</div>

? ??? ?? ????? ?? ??? ??? ????? ???? ?? ???? ???? ????. ??? ?? ?? ???, ?? ?? ?? ?? ?? ? ? ????.

??? ???????? : CSS? ???? ???? ??????

???? CSS? ???? ?? ???? ??? ??? ?? ????? ?? ???? ?????.

 .Video-Container {
  ?? : ??;
  ?? width : 640px;
  ?? : 20px ??;
}

.Custom-Video {
  ?? : 100%;
  ????? : ??;
  ?? : #000;
}

.controls {
  ?? : ??;
  ?? : 0;
  ?? : 0;
  ??? : 0;
  ?? : RGBA (0, 0, 0, 0.5);
  ?? : ??;
  ?? : 8px;
  ????? : Flex;
  ?? ?? : ??;
  ???? : 0;
  ?? : ???? 0.3S ??;
}

.Video-Container : hover .controls {
  ???? : 1;
}

?? ??? ??? ???? ???? ??? ??? ??? ??? ? ? ?? ??? ?????. ?? ?? ???, ??? ? ?? ?? ?? ???? ? ? ????.

?? ?? : JavaScript? ???? ?? ??? ??????

?? ?? ?????. ???? ??? ???? ????.

 const video = document.querySelector ( '. Custom-Video');
const playPauseBtn = document.querySelector ( '. Play-Pause');
Const SeekBar = Document.QuerySelector ( '. Seek-Bar');
const timedisplay = document.querySelector ( '. time');

// ??/?? ?? ?? PlayPauseBtn.AdDeventListener ( 'click', () => {{
  if (video.paused) {
    video.play ();
    PlayPauseBtn.textContent = '??';
  } ? ?? {
    video.pause ();
    PlayPauseBtn.textContent = '? ?';
  }
});

// ??? ?? ? ? ?? video.AdDeventListener ( 'TimeUpdate', () => {
  const % = (video.currenttime / video.duration) * 100;
  Seekbar.value = %;

  const formattime = (?) => {
    const min = math.floor (? / 60);
    const sec = math.floor (Seconds % 60) .tostring (). Padstart (2, '0');
    `$ {min} : $ {sec}`;
  };

  timedisplay.textContent =`$ {formattime (video.currenttime)} / $ {formattime (video.duration || 0)}`;
});

// ??? ?? ?? ???? SEEKBAR.ADDEVENTLISTERE ( 'Change', () => {
  const time = (seetbar.value / 100) * video.duration;
  video.currenttime = ??;
});

?? ??? ??/?? ??, ?? ???? ? ??? ?? ??? ??? ?????. ?? ??, ?? ?? ?? ?? ?? ??? ?? ?? ? ? ????.

?? ??

• ??? ?? : ?? ????? ??? ??? ??? ??? ? ???, ?? ?? (? : .mp4 ? .webm )? ???? ?? ????.
• ?? ?? : preload="auto" ? ?? ??? ??? ???? ? ??? ??? ?????? ??? ? ????.
• ??? ?? : ?? ????? ?? ???? ?? ??? ?? ?? ??? ??? ? ??? ????? ???? ????.
• ??? : ???? ????? ?? aria-label ? ??? ??? ???? ?? ?? ????.

????? ?? ??. ??? ??? ????? ??? HTML ??? ??? ???? ?? CSS? ?? ???? ???? ????? JS? ??? ??? ???? ????. ?? ? ???? ??? ??? ?? ?? ?????? ???????.

? ??? HTML, CSS ? JavaScript? ??? ?? ??? ????? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!