?? ???? ???? ??? ?? UI? ????. ??? ????

? ???, ? ?? ???? ????? ???? HTML5? ???? ??? ?? ??? ????? ????? ?? ??? ??? ????. HTML5? ????? ?? ??? ???? ??? ??, ??? ?????? ??? ?? ???? ?????. ???? ?? ???? ??? ???? ???? ??? ??? ????.

? 1. ?? HTML5 <video></video> ???? ??????

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

 <video id = "myvideo"width = "800"height = "450">
  <?? src = "your-video.mp4"type = "video/mp4">
  ????? ??? ??? ???? ????.
</video>

controls ??? ????? UI? ??? ???? ?????.

? 2. ??? ?? ??? ?? (HTML CSS)

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

 <div class = "??? ??">
  <button id = "playPauseBtn"> play </button>
  <?? ?? = "??"id = "ProgressBar"value = "0"min = "0">
  <?? ?? = "??"id = "VolumeBar"value = "1"min = "0"max = "1"step = "0.1">
  <button id = "fullScreenBtn"> ? </button>
</div>

???? ???? ????? CSS? ????????. ?? ?? ??? ??? ??? ?? ????? ???? ??????. ?:

 .Video-Controls {
  ????? : Flex;
  ?? ?? : ??;
  ? : 10px;
  ?? : #333;
  ?? : 10px;
}

? 3. ?? ??? ?? JavaScript? ??????

?? HTML5 ??? API? ???? ??? ??? ??? ??????.

 const video = document.getElementById ( 'myvideo');
const playPauseBtn = document.getElementById ( 'PlayPauseBtn');
const progressbar = document.getElementById ( 'ProgressBar');
const VolumeBar = document.getElementById ( 'VolumeBar');
const fullscreenbtn = document.getElementById ( 'fullScreenbtn');

// ??/?? ??
PlayPauseBtn.addeventListener ( 'Click', () => {
  if (video.paused) {
    video.play ();
    PlayPauseBtn.textContent = 'pause';
  } ? ?? {
    video.pause ();
    PlayPauseBtn.textContent = 'Play';
  }
});

// ??? ???? ??? ?? ?? ???????
video.addeventListener ( 'timeupdate', () => {
  const % = (video.currenttime / video.duration) * 100;
  ProgressBar.Value = %;
});

// ??? ?? ?? ?? ? ? ?????
ProgressBar.addeventListener ( 'input', () => {
  const time = (ProgressBar.Value / 100) * video.duration;
  video.currenttime = ??;
});

// ?? ???
volumebar.addeventListener ( 'input', () => {
  video.volume = VolumeBar.Value;
});

// ?? ??
fullScreenBTn.addeventListener ( 'click', () => {
  if (video.requestfullscreen) {
    video.requestfullscreen ();
  }
});

?? ?? ???? 0 ? ??? ????? ?? ? ????? ?????.

? 4. ??? : ???? ???? ?????

• progressBar.max = 100 ? ? ?? ?????? ?????? .

   video.addeventListener ( 'loadedEdmetadata', () => {
    ProgressBar.max = 100;
  });

• ? ? ?? ? ?? ?? ? ?? UX? ?? ??? ???? ??????.
• ??? ??????? ??? ??? ?? ??? (?? 44x44px) ?? ???? ???????.
• ???? aria-label ? ??? ?? (? : ??/?? ?? ? ???? ?)? ??????.

---

?? ??. ?? ???? ? ???? ???? ??? ??? HTML5 ??? ??????? ?? ?????? ???? ????.
Video.js ?? Plyr?? ??? ????? ??? ??? ?? ??? ?? ? ? ??? ???? ?????.

????? : ??? HTML, ?????? CSS, ??? JS -? ???????.

? ??? HTML5? ??? ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!