video标签自定义控制按钮--全屏与非全屏--播放与暂停

hover时,显示红色播放按钮和最大化按钮, 其余时刻隐藏,全屏时显示播放进度条,以及hover时,才显示红色暂停按钮和最小化按钮

<template>
  <div class="item-wrapper-inner" ref="fullscreenDomRef">
    <!-- 
      muted: 出现该属性表示静音 
      autoplay: 出现该属性表示自动播放
      loop: 出现该属性表示循环播放
      preload: 出现该属性表示视频在页面加载前就开始加载
      disablepictureinpicture: 禁用画中画
    -->
    <video
      :controls="controls"
      preload
      muted
      autoplay
      loop
      disablepictureinpicture
      controlslist="nodownload noplaybackrate"
      ref="videoDomRef"
    >
      <source src="/01.mp4" />
    </video>
    <div class="full-screen-btn" @click="onToggleFullscreen">
      <a-icon type="fullscreen" />
    </div>
    <div class="play-stop-btn" @click="onTogglePlay">
      <a-icon type="pause-circle" v-if="playing" />
      <a-icon type="play-circle" v-else />
    </div>
  </div>
</template>

<script>
export default {
  name: "VideoPLayer",
  props: ["src"],
  data() {
    return {
      controls: false,
      playing: false
    };
  },
  methods: {
    onToggleFullscreen() {
      const fullscreenDom = this.$refs.fullscreenDomRef;
      console.log(document.fullscreenElement);
      if (document.fullscreenElement) {
        this.cancelFullscreen();
      } else {
        this.fullscreenFun(fullscreenDom);
      }
    },
    fullscreenFun(ele) {
      if (ele.requestFullscreen) {
        ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
        ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullScreen) {
        ele.webkitRequestFullScreen();
      }
    },
    cancelFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    onFullscreenchange() {
      if (document.fullscreenElement) {
        console.log("元素已进入全屏状态");
        this.controls = true;
      } else {
        console.log("元素已退出全屏状态");
        this.controls = false;
      }
    },
    onTogglePlay() {
      const videoDom = this.$refs.videoDomRef;
      if (videoDom) {
        if (videoDom.paused) {
          videoDom.play();
        } else {
          videoDom.pause();
        }
      }
    },
    videoEvtListnerDestory() {
      const videoDom = this.$refs.videoDomRef;
      if (videoDom) {
        videoDom.removeEventListener("play");
        videoDom.removeEventListener("pause");
        videoDom.removeEventListener("ended");
      }
    },
    videoEvtListner() {
      const videoDom = this.$refs.videoDomRef;
      if (videoDom) {
        videoDom.addEventListener("play", () => {
          //播放
          console.log("开始播放");
          this.playing = true;
        });
        videoDom.addEventListener("pause", () => {
          //暂停
          console.log("暂停");
          this.playing = false;
        });
        videoDom.addEventListener(
          "ended",
          () => {
            //结束
            console.log("播放结束");
            this.playing = false;
          },
          false
        );
      }
    }
  },
  mounted() {
    this.videoEvtListner();
    document.addEventListener("fullscreenchange", this.onFullscreenchange);
  },
  beforeDestroy() {
    this.videoEvtListnerDestory();
    document.removeEventListener("fullscreenchange", this.onFullscreenchange);
  }
};
</script>
<style scoped lang="less">
.item-wrapper-inner {
  height: 100%;
  position: relative;
  video {
    width: 100%;
    height: 100%;
  }
  // 全屏按钮
  video::-webkit-media-controls-fullscreen-button {
    display: none;
  }
  //播放按钮
  video::-webkit-media-controls-play-button {
    display: none;
  }
  .full-screen-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    color: red;
    display: none;
    cursor: pointer;
  }
  .play-stop-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    color: red;
    display: none;
    cursor: pointer;
    transform: translate(-50%);
  }
  &:hover {
    .full-screen-btn {
      display: block;
    }
    .play-stop-btn {
      display: block;
    }
  }
}
</style>