怎么在HTML中插入视频控制条_HTML5 video自定义控件开发指南

<div class="video-container">
  <video id="myVideo" width="800" height="450">
    <source src="example.mp4" type="video/mp4">
    您的浏览器不支持 video 标签。
  </video>

  <div class="custom-controls">
    <button id="playPauseBtn">播放</button>
    <input type="range" id="seekBar" value="0">
    <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
    <button id="fullscreenBtn">全屏</button>
  </div>
</div>

const video = document.getElementById('myVideo');
const playPauseBtn = document.getElementById('playPauseBtn');
const seekBar = document.getElementById('seekBar');
const volumeBar = document.getElementById('volumeBar');
const fullscreenBtn = document.getElementById('fullscreenBtn');

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

video.addEventListener('timeupdate', () => {
  seekBar.value = video.currentTime;
});

seekBar.addEventListener('change', () => {
  video.currentTime = seekBar.value;
});

volumeBar.addEventListener('change', () => {
  video.volume = volumeBar.value;
});

fullscreenBtn.addEventListener('click', () => {
  if (video.requestFullscreen) {
    video.requestFullscreen();
  }
});

.video-container {
  position: relative;
  display: inline-block;
}

.custom-controls {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#seekBar, #volumeBar {
  -webkit-appearance: none;
  height: 5px;
  background: #444;
  border-radius: 5px;
}

#seekBar::-webkit-slider-thumb,
#volumeBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

.custom-controls {
  opacity: 0;
  transition: opacity 0.3s;
}

.video-container:hover .custom-controls {
  opacity: 1;
}