前端给视频加水印

<template>
  <div ref="videoContainer" style="position: relative; width: 100%; height: 100%">
    <!-- 视频标签 -->
    <video
      ref="video"
      class="video"
      controls
      autoplay
      loop
      style="width: 100%; height: 100%"
      :src="videoUrl"
      @click="togglePlay"
      controlsList="nodownload"
    ></video>

    <!-- 对角线游动的水印 -->
    <div class="watermark">
      视频水印
    </div>

    <!-- 自定义全屏按钮 -->
    <button @click="toggleFullscreen" class="fullscreen-btn">
      {{ isFullscreen ? "退出全屏" : "全屏" }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoUrl: "https://www.example.com/video.mp4", // 替换为你的视频 URL
      isFullscreen: false, // 控制全屏状态
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.video;
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    },
    toggleFullscreen() {
      const videoContainer = this.$refs.videoContainer;
      if (!this.isFullscreen) {
        if (videoContainer.requestFullscreen) {
          videoContainer.requestFullscreen();
        } else if (videoContainer.webkitRequestFullscreen) {
          videoContainer.webkitRequestFullscreen();
        } else if (videoContainer.msRequestFullscreen) {
          videoContainer.msRequestFullscreen();
        }
        this.isFullscreen = true;
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.isFullscreen = false;
      }
    },
  },
  mounted() {
    document.addEventListener("fullscreenchange", this.onFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener("fullscreenchange", this.onFullscreenChange);
  },
  methods: {
    toggleFullscreen() {
      if (!this.isFullscreen) {
        if (this.$refs.videoContainer.requestFullscreen) {
          this.$refs.videoContainer.requestFullscreen();
        } else if (this.$refs.videoContainer.webkitRequestFullscreen) {
          this.$refs.videoContainer.webkitRequestFullscreen();
        } else if (this.$refs.videoContainer.msRequestFullscreen) {
          this.$refs.videoContainer.msRequestFullscreen();
        }
        this.isFullscreen = true;
      } else {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.isFullscreen = false;
      }
    },
    onFullscreenChange() {
      this.isFullscreen = !!(
        document.fullscreenElement ||
        document.webkitFullscreenElement ||
        document.msFullscreenElement
      );
    },
  },
};
</script>

<style scoped>
.video {
  width: 100%;
  height: 100%;
}

.watermark {
  color: rgba(255, 255, 255, 0.5);
  font-size: 24px;
  font-weight: bold;
  pointer-events: none; /* 确保水印不会阻止点击事件 */
  position: absolute;
  z-index: 10;
  animation: diagonalMove 5s linear infinite alternate;
}

.fullscreen-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  border-radius: 4px;
  z-index: 10;
}

/* 水印对角线游动动画 */
@keyframes diagonalMove {
  0% {
    top: 10px;
    left: 10px;
  }
  100% {
    top: calc(100% - 40px); /* 调整以防止水印超出边界 */
    left: calc(100% - 120px);
  }
}
</style>