怎样开发一个视频播放控制插件_JavaScript视频插件功能与交互开发教程

<div class="video-player">
  <video id="myVideo" src="example.mp4"></video>
  <div class="controls">
    <button class="play-pause">播放</button>
    <input type="range" class="progress-bar" value="0">
    <input type="range" class="volume" min="0" max="1" step="0.1" value="1">
    <span class="time">00:00 / 00:00</span>
  </div>
</div>

const video = document.getElementById('myVideo');
const playBtn = document.querySelector('.play-pause');
const progressBar = document.querySelector('.progress-bar');
const volumeControl = document.querySelector('.volume');
<p>playBtn.addEventListener('click', () => {
if (video.paused) {
video.play();
playBtn.textContent = '暂停';
} else {
video.pause();
playBtn.textContent = '播放';
}
});</p><p>video.addEventListener('timeupdate', () => {
const percent = (video.currentTime / video.duration) * 100;
progressBar.value = percent;</p><p>const curr = formatTime(video.currentTime);
const dur = formatTime(video.duration);
document.querySelector('.time').textContent = <code>${curr} / ${dur}</code>;
});</p><p>progressBar.addEventListener('input', (e) => {
const seekTime = (e.target.value / 100) * video.duration;
video.currentTime = seekTime;
});</p>

new VideoPlayer('#myVideo', {
  autoplay: false,
  volume: 0.8,
  showControls: true
});