Vue uses video tag to realize video playback

This article project for everyone to share Vue using video tags to achieve video playback of the specific code, for your reference, the specific content is as follows

Project requirements: Dynamic display of video scroll bar, prohibition of video downloading, update the current duration every 5s when playing, and pause video display prompt every 10 minutes.
Before, vue-video-player components were basically used for video playback, which was due to complete packaging functions and good playback source compatibility.
Through the requirements of this project, I also deeply studied the attributes and methods of video tags. I'd like to share it with you here.

The specific usage method is as follows

<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 
      //  Class hours 
      studyTime: {
        currentTime: 0, //  Current length of schooling 
        duration: 0 //  Total duration 
      },
      timer: {}, //  Timer 
      pauseTimer: {} //  Pause timer 
    };
  },
  /**
   * @param poster  Display drawing 
   * @param src  Video resources 
   * @param controls  Whether to display controls 
   * @param control  Control control 
   * @param videoData  Video basic 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() {
    //  Monitor video playback 
    this.$refs.myVideo.addEventListener("play", () => {
      console.log("video is playing");
      this.openTimer();
    });
    //  Monitor video pause 
    this.$refs.myVideo.addEventListener("pause", () => {
      console.log("video is stop");
      this.closeTimer();
    });
  },
  methods: {
    //  Start the timer 
    openTimer() {
      this.timer = setInterval(() => {
        this.$emit("videoStudyTime", this.studyTime);
      }, 5000);
    },
    //  Close the timer 
    closeTimer() {
      clearInterval(this.timer);
      this.$emit("videoStudyTime", this.studyTime);
    },
    //  Turn on the pause timer 
    openPauseTimer() {
      this.pauseTimer = setInterval(() => {
        this.hintOperate();
      }, 600000);
    },
    //  Turn off the pause timer 
    closePauseTimer() {
      clearInterval(this.pauseTimer);
    },
    //  Prompt operation 
    hintOperate() {
      this.operateVideo();
      this.$alert(" Please click OK to continue learning ", " Prompt ", {
        confirmButtonText: " Determine ",
        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: " There are no video resources at present, 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: {
    //  Monitor 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>

Note:

1. Dynamic display of video scrollbars using isShow attributes and css styles
2. Use the nc o ntextmenu = "return false" attribute of the video tag to disable downloads
3. Time video playback progress monitoring using the @ timeupdate= "timeupdate" method of the video tag
4. ref attribute of vue is used to bind video tags to monitor events, so as to realize other functions, such as time statistics, delay prompt, dynamic display of icon play buttons and so on.