This is the 8th day of my participation in Gwen Challenge

Customize the playback progress bar

The sample code is posted below (js is native and can be used at ease).

<div class="video-box">
  <! -- Insert apple AD -->
  <video src="iphone12.mp4"></video>
  <! -- Control bar -->
  <div class="ctrl-box">
    <! -- Progress bar -->
    <div class="progress-box">
      <div class="progress"></div>
    </div>
    <div class="play-btn">Play/Pause</div>
    <div class="progress-time">Prefer/prefer</div>
  </div>
</div>

<script>
  var video = document.querySelector('video')
  var progressBox = document.querySelector('.progress-box')
  var progress = document.querySelector('.progress')
  var progressTimer = null / / schedule the timer
  
  // Calculate the duration, note: here padStart is es7 syntax
  function parseTime(value){if(! value)return ' '　　　
  　　let interval = Math.floor(value)let minute = (Math.floor(interval / 60)).toString().padStart(2.'0')let second = (interval % 60).toString().padStart(2.'0')return `${minute}:${second}`
  }
  // Advance the progress bar
  function changeProgress() {
    var timeStr = parseTime(video.currentTime) + '/' + parseTime(video.duration)
    document.querySelector('.ctrl-box .progress-time').innerText = timeStr
    var percent = video.currentTime / video.duration
    progress.style.width = percent * 100 + The '%'
  }
  Click anywhere in the progress bar
  progressBox.onclick = function (e) {
    clearInterval(progressTimer)
    var length = e.pageX - progressBox.offsetLeft
    var percent = length / progressBox.offsetWidth
    video.currentTime = percent * video.duration
    video.play()
    progressTimer = setInterval(changeProgress, 60)
    // Display the video playing style
    // ...
  }
  // Play & pause click
  document.querySelector('.play-btn').onclick = function () {
    if (video.paused) {
      // After playing, you need to advance the progress bar
      video.play()
      progressTimer = setInterval(changeProgress, 60)}else {
      // After pausing, the progress bar needs to be stopped
      video.pause()
      clearInterval(progressTimer)
    }
  }
</script>

<style>
  /* Progress-box: write a fixed width, use a relative position, write a border color progress: write a background color, the width can change with js */
   * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    
    .video-box {
      width: 100%;
      height: auto;
    }
    video {
      width: 100%;
    }
    .ctrl-box {
      width: 80%;
      margin: 0 auto;
    }
    .ctrl-box .progress-box {
      position: relative;
      height: 30px;
      margin-bottom: 10px;
      background: rgba(0.0.0.0.1);
      border-radius: 8px;
      border: 1px solid rgb(131.175.155);
      overflow: hidden;
      cursor: pointer;
    }
    .ctrl-box .progress-box .progress {
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      background: rgb(131.175.155);
    }
    .ctrl-box .play-btn {
      display: inline-block;
      margin-right: 20px;
      cursor: pointer;
    }
    .ctrl-box .progress-time {
      display: inline-block;
    }
</style>
Copy the code

Effect:

In fact, it is not difficult to achieve, as long as you know how to obtain the played time and total time of the video. Use the following formula to derive the progress of the progress bar, and then convert the progress to the style.

Progress = Played Duration/Total Duration

One thing to note is that the progress bar can be clicked at will. When the progress bar is clicked, the video progress needs to jump to the corresponding time point. This implementation only needs to know the x coordinate of the user’s mouse click, the X coordinate of the progress bar, the total width of the progress bar and the total length of the video. The following formula can be used to know which target time point the video needs to jump to. (Assume the left border of body as X-axis)

Progress bar width = Mouse x – Progress bar X scale = Progress bar width/Total Progress bar Width Target time point = Scale x Total video duration Video. currentTime = Target time point

Folks don’t have to duplicate the wheel, just copy and paste, change the style.