Vue uses the video tag to implement video playback

 <template>
  <!-- Video component -->
  <div id="common-video" class="h-100">
    <div :class="{ isShow: control }" class="h-100">
      <video
        ref="myVideo"
        :poster="poster"
        :src="src"
        :controls="controls"
        oncontextmenu="return false"
        @timeupdate="timeupdate"
        controlslist="nodownload"
        class="video-box"
      ></video>
      <img
        src="@/assets/images/playbtn.png"
        alt=""
        @click="operateVideo"
        class="pointer operate-btn"
        :class="{ 'fade-out': videoState }"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonVideo",
  data() {
    return {
      videoState: false, // Video playback status // Study time studyTime: {
        currentTime: 0, // Current learning time duration: 0 // Total time},
      timer: {}, // timer pauseTimer: {} // pause timer };
  },
  /**
   * @param poster display image* @param src video resource* @param controls whether to display controls* @param control control* @param videoData basic video data*/
  props: {
    poster:
      type: String,
      required: false,
      default: ""
    },
    src: {
      type: String,
      required: true
    },
    controls: {
      type: Boolean,
      required: false,
      default: true
    },
    control: {
      type: Boolean,
      required: false,
      default: false
    },
    videoData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    // Listen for video playback this.$refs.myVideo.addEventListener("play", () => {
      console.log("video is playing");
      this.openTimer();
    });
    // Listen for video pause this.$refs.myVideo.addEventListener("pause", () => {
      console.log("video is stopped");
      this.closeTimer();
    });
  },
  methods: {
    // Open the timer openTimer() {
      this.timer = setInterval(() => {
        this.$emit("videoStudyTime", this.studyTime);
      }, 5000);
    },
    // Close the timer closeTimer() {
      clearInterval(this.timer);
      this.$emit("videoStudyTime", this.studyTime);
    },
    // Open the pause timer openPauseTimer() {
      this.pauseTimer = setInterval(() => {
        this.hintOperate();
      }, 600000);
    },
    // Close the pause timer closePauseTimer() {
      clearInterval(this.pauseTimer);
    },
    // Hint operation hintOperate() {
      this.operateVideo();
      this.$alert("Please click to confirm and continue learning", "Prompt", {
        confirmButtonText: "Confirm",
        confirmButtonClass: "hint-btn",
        showClose: false,
        callback: action => {
          this.$refs.myVideo.currentTime = this.videoData.currentTime;
          this.operateVideo();
          this.openPauseTimer();
        }
      });
    },
    // Get the current playback position timeupdate(e) {
      this.studyTime.currentTime = e.target.currentTime;
      this.studyTime.duration = e.target.duration ? e.target.duration : 0;
    },
    // Operate video playback and pause operateVideo() {
      if (!this.src) {
        this.$message({ message: "No video resources, please check other videos!" });
        return false;
      }
      if (this.$refs.myVideo.paused) {
        this.$refs.myVideo.play();
        this.videoState = true;
      } else {
        this.$refs.myVideo.pause();
        this.videoState = false;
      }
    }
  },
  watch:
    //Monitoring operation videoData(val, oldVal) {
      const { currentTime, duration } = val;
      if (currentTime && duration && currentTime < duration) {
        this.hintOperate();
      }
    }
  }
};
</script>

<style lang="less">
#common-video {
  position: relative;
  .video-box {
    box-sizing: border-box;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none !important;
  }
  .isShow {
    //Progress bar video::-webkit-media-controls-timeline {
      display: none;
    }
  }
  video::-webkit-media-controls-play-button {
    visibility: hidden;
  }
  .operate-btn {
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
  }
  .operate-btn:hover {
    opacity: 0.8;
  }
  .fade-out {
    opacity: 0;
  }
}
</style>