Video rewrite control bar — Solve the highest problem of video full-screen level

This is the 7th day of my participation in the August Text Challenge.More challenges in August

X5-video-player-type =”h5″, x5-video-player-type=”h5″, x5-video-player-type=”h5″, x5-video-player-type=”h5″ After analysis, simple rewrite control bar, there are several function points: 1. Pause function/play function

• Progress bar following function during playback
• Time change function during playback
• The progress bar stops when paused
• Pause time stop function

2. Full screen function

• Enter the full screen
• Exit full screen

3. Display the current time and total time

• The current time of playback
• Total playing time

4. Drag the progress bar

• The screen jumps when the progress bar drags
• Progress bar dragging time changes function

5. Handling at the end of playback

The HTML section of the page

<! -- @contextmenu.prevent=""Disable right-click menu --><div class="relative" @contextmenu.prevent="">
        <div class="content">
          <div class="player">
            <video 
              preload="auto"
              webkit-playsinline="true"
              playsinline="true"
              x-webkit-airplay="allow"
              x5-video-player-type="h5"
              x5-video-player-fullscreen="true"
              style="object-fit: fill"
              :src="src"
            >Your browser does not support the video TAB.</video>
            <div class="control">
              <div
                class="iconfont iconfa-play play_pause"
                @click="handlePlay"
              ></div>
              <div>
                <el-slider
                  v-model="progressValue"
                  class="progress"
                  @change="handleChangeProgress"
                ></el-slider>
              </div>
              <div class="timer">
                <span class="progress_timer">00:00:00</span>/
                <span class="duration_timer">00:00:00</span>
              </div>
              <div
                class="iconfont iconexpand expand"
                @click="handleSreen"
              ></div>
            </div>
            <img
              v-watermark="{ text: baseParamPressimg, textColor: 'rgb(180, 180, 180)', }"
              class="baseParamPressimg"
              @click="handleImg"
            />
          </div>
        </div> 
      </div>
Copy the code

2. CSS

Video / * * /
/deep/.video-box {
  overflow: hidden;
  background: #000;
  width: 750px;
  display: block;
  margin: 0 auto;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -ms-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  z-index: 10;
}
/deep/.video-box-body {
  width: 100%;
  height: 422px;
  overflow: hidden;
  position: relative;
}
/deep/.video-body {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
}
Video / * * /
/deep/.video-box {
  overflow: hidden;
  background: #000;
  width: 750px;
  display: block;
  margin: 0 auto;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -ms-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  z-index: 10;
}
/deep/.video-box-body {
  width: 100%;
  height: 422px;
  overflow: hidden;
  position: relative;
}
/deep/.video-body {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
}
// /deep/.vjs-text-track-display {
// width: 657px;
// height: 290px;
// }
/deep/.video-js {
  /deep/.vjs-control-bar {
    .vjs-icon-custombutton {
      font-family: VideoJS;
      font-weight: normal;
      font-style: normal;
    }
    .vjs-icon-custombutton:before {
      content: "\f108";
      font-size: 1.8em;
      line-height: 1.67; }}} * {margin: 0;
  padding: 0;
}
/* Remove the built-in control bar in full screen */
video::-webkit-media-controls {
  display: none ! important; } .wrap h3 { text-align: center; height: 100px; line-height: 100px; } .player {width: 720px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}
.player video {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
}
.control {
  display: flex;
  align-items: center;
}
.player .control {
  position: absolute;
  width: 100%;
  height: 40px;
  border-radius: 5px;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 999;
}
.player .control div {
  display: inline-block;
  line-height: 40px;
  margin-left: 10px;
  font-size: 18px;
  color: #fff;
}
.player .control .play_pause,
.player .control .expand {
  color: rgb(255.255.0);
}
.player .control div:nth-child(2) {
  width: 460px;
  height: 12px;
  background-color: rgba(255.255.255.0.8);
  overflow: hidden;
  flex: 1;
  margin: 0 10px;
}
.player .control .progress {
  display: block;
  width: 100%;
  height: 12px;
  background: $grade;
  margin-left: 0;
}
.player .control .timer {
  font-size: 12px;
}
.expand {
  width: 50px;
}
/deep/.el-tooltip {
  vertical-align: super;
}
/deep/.el-slider__button {
  border: none;
  width: 10px;
  height: 10px;
  margin: 0 10px;
}
/deep/.el-slider__button-wrapper {
  height: 0;
}
.baseParamPressimg {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
}
Copy the code

Pause function/play function

handlePlay() {
      console.log("Play");
      // Get the element
      var videoObj = document.querySelector("video");
      var playBtn = document.querySelector(".play_pause");
      if (videoObj.paused) {
        // If the video is playing
        videoObj.play();
        playBtn.classList.remove("iconfa-play");
        playBtn.classList.add("iconfa-pause");
      } else {
        videoObj.pause();
        playBtn.classList.add("iconfa-play");
        playBtn.classList.remove("iconfa-pause");
      }
      this.myTime = setInterval(() = > {
        vm.handleChangeTime();
        // End of the event
        if (this.progressValue == 100) {
          // Clear the timer
          clearInterval(this.myTime);
          // The progress bar is reset to 0
          this.progressValue = 0;
          // Stop playing
          videoObj.pause();
          playBtn.classList.add("iconfa-play");
          playBtn.classList.remove("iconfa-pause"); }},1000);
    },
Copy the code

Four, full screen function

// Implement full screen
    handleSreen() {
      // 0. Implement full screen
      if (!this.videoState) {
        document.querySelector(".player").webkitRequestFullScreen();
        this.videoState = 1;
      } else {
        document.webkitCancelFullScreen();
        this.videoState = 0; }},Copy the code

Display the current time and total time

// Implementation time
    handleChangeTime() {
      var videoObj = document.querySelector("video");
      var progressTimer = document.querySelector(".progress_timer");
      var durationTimer = document.querySelector(".duration_timer");
      let { totalT, presentT } = { totalT: 0.presentT: 0 };
      totalT = videoObj.duration;
      var videoDuration = vm.formatTime(totalT);
      durationTimer.innerHTML = videoDuration;
      presentT = videoObj.currentTime;
      var videoCurrent = vm.formatTime(presentT);
      progressTimer.innerHTML = videoCurrent;
      this.totalT = totalT;
      // Progress bar following section
      // var progress = document.querySelector(".progress");
      this.percent = (presentT / totalT) * 100;
      this.progressValue = this.percent;
    },
    // Time formatting
    formatTime(t) {
      var h = parseInt(t / 3600);
      h = h < 10 ? "0" + h : h;
      var m = parseInt((t % 3600) / 60);
      m = m < 10 ? "0" + m : m;
      var s = parseInt(t % 60);
      s = s < 10 ? "0" + s : s;
      return h + ":" + m + ":" + s;
    },
Copy the code

Drag the progress bar

Here we need to find the current time, so that the current time changes with the drag of the scroll bar. Current time = drag digital progress / 100 * total time

 handleChangeProgress() {
      // progressValue
      var videoObj = document.querySelector("video");
      videoObj.currentTime = (this.progressValue / 100) * this.totalT;
    },
Copy the code

7. Handling at the end of playing

This functionality is handled in the code in step 3.

8. Data

There may be missing or redundant arguments:

	videoState: 0.// The playback state of the video is full-screen 1 and non-full-screen 0
      src: "".// The address to play the video
      queryParams: {
        pageNum: 1.pageSize: 8,},total: 0.myTime: "".// The current playing time node
      progressValue: 0.percent: 0.// The difference between the current playback time and the total time
      totalT: 0./ / total time
Copy the code

Nine, epilogue

Effect:  Reference link: Control bar functionalityHowever, the control bar is still unable to display in full screen, so I happened to see this articleReference link: Full screen displaySo I found that I could write:

document.querySelector(".player").webkitRequestFullScreen();
Copy the code

The above is the same as refs. Then refer to the Video object attributes and methods to rewrite the corresponding functions of the control bar