使用Javascript制作视频播放器

Question

我正在使用 Javascript 制作一个播放视频的视频播放器。所有代码似乎都添加正确。但代码似乎不起作用。在这里：

HTML

<video  id="myVideo">
    <source src="coolfirst2hours.mp4" type="video/mp4">
  </video>
<button id="playVid" type="button">PLAY</button>

Javascript

// Get the video and play button elements
const videoElem = document.getElementById('myVideo');
const playButton = document.getElementById('playVid');

// Add event listener to play button
playButton.addEventListener('click', () => {
  videoElem.play();
});

Answer 1

对于 HTML 的末尾，我想我会添加这个，用于定义按钮：

 <div id="controls">
        <button id="playVid" type="button">PLAY</button>
        <button id="pauseVid" type="button">PAUSE</button>
        <button id="stopVid" type="button">STOP</button>
        <button id="muteVid" type="button">MUTE</button>
        <button id="unmuteVid" type="button">UNMUTE</button>
        <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">
        <input type="range" id="progressBar" value="0">
    </div>

    <script src="script.js"></script>

对于 JavaScript 部分：

const videoElem = document.getElementById('myVideo');
const playButton = document.getElementById('playVid');
const pauseButton = document.getElementById('pauseVid');
const stopButton = document.getElementById('stopVid');
const muteButton = document.getElementById('muteVid');
const unmuteButton = document.getElementById('unmuteVid');
const volumeControl = document.getElementById('volumeControl');
const progressBar = document.getElementById('progressBar');

playButton.addEventListener('click', () => {
    videoElem.play();
});

pauseButton.addEventListener('click', () => {
    videoElem.pause();
});

stopButton.addEventListener('click', () => {
    videoElem.pause();
    videoElem.currentTime = 0;
});

muteButton.addEventListener('click', () => {
    videoElem.muted = true;
});

unmuteButton.addEventListener('click', () => {
    videoElem.muted = false;
});

volumeControl.addEventListener('input', () => {
    videoElem.volume = volumeControl.value;
});

videoElem.addEventListener('timeupdate', () => {
    const progress = (videoElem.currentTime / videoElem.duration) * 100;
    progressBar.value = progress;
});

progressBar.addEventListener('input', () => {
    const newTime = (progressBar.value / 100) * videoElem.duration;
    videoElem.currentTime = newTime;
});