HTML5的Video标签怎么用？如何自定义播放控件？

<video src="your-video.mp4" controls width="640" height="360" poster="video-thumbnail.jpg">
  您的浏览器不支持HTML5视频。
</video>

<video controls width="640"    style="max-width:90%" poster="video-thumbnail.jpg">
  <source src="your-video.mp4" type="video/mp4">
  <source src="your-video.webm" type="video/webm">
  <source src="your-video.ogg" type="video/ogg">
  您的浏览器不支持HTML5视频。
</video>

<video id="myVideo" width="640" height="360" poster="video-thumbnail.jpg">
  <source src="your-video.mp4" type="video/mp4">
  <!-- 其他source标签 -->
</video>

<div class="video-container">
  <video id="myVideo" width="640" height="360" poster="video-thumbnail.jpg">
    <source src="your-video.mp4" type="video/mp4">
  </video>
  <div class="controls-overlay">
    <button id="playPauseBtn">播放</button>
    <div class="progress-bar-wrapper">
      <div id="progressBar" class="progress-bar"></div>
    </div>
    <span id="currentTime">00:00</span> / <span id="duration">00:00</span>
    <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1">
    <button id="fullscreenBtn">全屏</button>
  </div>
</div>

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeSpan = document.getElementById('currentTime');
const durationSpan = document.getElementById('duration');
const volumeControl = document.getElementById('volumeControl');
const fullscreenBtn = document.getElementById('fullscreenBtn');

// 播放/暂停
playPauseBtn.addEventListener('click', () => {
  if (video.paused || video.ended) {
    video.play();
    playPauseBtn.textContent = '暂停';
  } else {
    video.pause();
    playPauseBtn.textContent = '播放';
  }
});

// 更新进度条和时间显示
video.addEventListener('timeupdate', () => {
  const percentage = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${percentage}%`;
  currentTimeSpan.textContent = formatTime(video.currentTime);
});

// 视频元数据加载完成时显示总时长
video.addEventListener('loadedmetadata', () => {
  durationSpan.textContent = formatTime(video.duration);
});

// 拖动进度条
// 这一部分需要更复杂的逻辑，包括鼠标按下、移动和释放事件，以及计算点击位置与视频时长的对应关系
progressBar.parentElement.addEventListener('click', (e) => {
  const clickX = e.clientX - progressBar.parentElement.getBoundingClientRect().left;
  const width = progressBar.parentElement.offsetWidth;
  const clickPercentage = clickX / width;
  video.currentTime = video.duration * clickPercentage;
});

// 音量控制
volumeControl.addEventListener('input', () => {
  video.volume = volumeControl.value;
});

// 全屏控制
fullscreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) { /* Safari */
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) { /* IE11 */
    video.msRequestFullscreen();
  }
});

// 辅助函数：格式化时间
function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = Math.floor(seconds % 60);
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}

// 播放状态改变时更新按钮文本
video.addEventListener('play', () => playPauseBtn.textContent = '暂停');
video.addEventListener('pause', () => playPauseBtn.textContent = '播放');
video.addEventListener('ended', () => playPauseBtn.textContent = '播放');