视频进度不会在点击时更新-Javascript

问题描述

伙计们，我正在尝试制作新的视频播放器，并且在移动视频进度栏时，它不起作用。当我双击它实际上起作用。

HTML：

<video
      src="gone.mp4"
      id="video"
      class="screen"
      poster="poster.png"
    ></video>
    <div class="controls">
      <button class="btn" id="play">
        <i class="fa fa-play fa-2x"></i>
      </button>
      <button class="btn" id="stop">
        <i class="fa fa-stop fa-2x"></i>
      </button>
      <input
        type="range"
        id="progress"
        class="progress"
        min="0"
        max="100"
        step="0.1"
        value="0"
      />
      <span class="timestamp" id="timestamp">00:00</span>
    </div>

JavaScript：

const video = document.getElementById("video"),play = document.getElementById("play"),stop = document.getElementById("stop"),progress = document.getElementById("progress"),timestamp = document.getElementById("timestamp");



video.addEventListener("click",toggleVideoStatus);
video.addEventListener("pause",updatePlayIcon);
video.addEventListener("play",updatePlayIcon);
video.addEventListener("timeupdate",updateProgress);

play.addEventListener("click",toggleVideoStatus);
stop.addEventListener("click",stopVideo)

progress.addEventListener("change",setVideoProgress);


function toggleVideoStatus(){
    if(video.paused){
        video.play();
    } else {
        video.pause();
    }
}

function updatePlayIcon() {
    if(video.paused){
        play.innerHTML = "<i class='fa fa-play fa-2x'></i>";
    } else {
        play.innerHTML = "<i class='fa fa-pause fa-2x'></i>";
    }
}

function updateProgress() {
  // console.log(video.currentTime); // Streaming Current Seconds
  // console.log(video.duration); // Total Video Time
  progress.value = (video.currentTime / video.duration) * 100;

  // Get Minutes

  let mins = Math.floor(video.currentTime / 60 );
  if(mins < 10){
    mins = "0" + String(mins);
  }

  // Get Seconds

  let secs = Math.floor(video.currentTime % 60);
  if(secs < 10){
    secs = "0" + String(secs);
  }

  timestamp.innerHTML = `${mins} : ${secs}`;

}

function setVideoProgress() {
  video.currentTime = (+progress.value * video.duration) / 100
}

function stopVideo(){
  video.currentTime = 0;
  video.pause();
}

对于进度栏，我使用了Change event ...对于单击视频缓冲区，我使用了click事件，而我也看到了任何良好的结果。 请让我知道我是否想念任何东西。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）