WEB页面的全屏添加水印

需求就是一个视频，全屏播放的时候加上文字水印。

查了好多资料，说都是写的假的全屏，于是我费尽心思写了一个F11+el-drawer，制造了一个全屏的假象。

• html部分，先写一个视频组件，点击全屏的按钮和一个默认隐藏的抽屉组件。

<!-- 这是页面上最初展示的vedio组件-->
<video id="videoPlayer" ref="videoPlayer" controls @ended="videoEnded" :src="videoAdress" width="100%" height="700px" danmu-list="测试" controlsList="nodownload"></video>     

<!-- 全屏点击按钮-->
<el-button @click="toggleFakeFullScreen" type="primary" style="margin-left: 16px;">
     {{ isFullScreen ? '退出全屏' : '全屏' }}
</el-button>

<!-- 利用抽屉的组件，默认情况下为隐藏-->
<el-drawer :title="title" :visible.sync="drawer" :direction="direction" size="100%" :with-header="false" :style="drawerStyle">
     <video id="videoPlayer1" ref="videoPlayer1" controls @ended="videoEnded"           :src="videoAdress" width="100%" height="100%" controlsList="nodownload"></video>
</el-drawer>

• JS部分，代码里有备注的啦~~

import Watermark from '@/utils/watermark.js';//引入一个canves画的水印
mounted() {
      if (!Watermark) {
        Watermark = null
        // console.log("无水印",Watermark)
        return
      } else {
        Watermark.set(
          '水印欸嘿', '水印欸嘿', '水印欸嘿', '水印欸嘿'
        )
      }
      // 返回顶部按钮
      if (this.topFlag) {
        this.scrolltop = document.getElementsByClassName("scrollTop")[0];
        this.scrolltop.onclick = function() {
          window.scrollTo({
            top: 0,
            behavior: "smooth"
          });
        };
        window.addEventListener("scroll", this.backTop);
      }
      document.addEventListener('fullscreenchange', this.handleFullscreenChange);
},

methods: {

    //点击进入全屏
    toggleFakeFullScreen() {
        //这个方法是用来同步两边的视频播放进度的
        this.playBySecond();
        //将el-drawer展示出来
        this.drawer = true;
        //判断是否是全屏状态下即F11去确定是切进全屏还是退出
        if (!document.fullscreenElement) {
            this.enterFullScreen();
        } else {
            this.exitFullScreen();
        }
    },
    //进入全屏
    enterFullScreen() {
        let element = document.documentElement;
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            /* Firefox */
            element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
            /* Chrome, Safari & Opera */
            element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
            /* IE/Edge */
            element.msRequestFullscreen();
        }
    },
    //推出全屏
    exitFullScreen() {
       if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            /* Firefox */
            document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
            /* Chrome, Safari and Opera */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            /* IE/Edge */
            document.msExitFullscreen();
        }
    },

}

• canves的文件，这个页面需要大家各自根据实际情况处理啦！！ 

let watermark = {}
let idd = "1.23452384164.123412416"
let setWatermark = (str, srt1, srt2, srt3) => {
  let id = idd
  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  //创建一个画布
  let can = document.createElement("canvas")
  //设置画布的长宽
  can.width = 1200
  can.height = 500

  let cans = can.getContext("2d")
  //旋转角度
  cans.rotate((-15 * Math.PI) / 180)
  cans.font = "18px Vedana"
  //设置填充绘画的颜色、渐变或者模式
  cans.fillStyle = "rgba(200, 200, 200, 0.40)"
  //设置文本内容的当前对齐方式
  cans.textAlign = "left"
  //设置在绘制文本时使用的当前文本基线
  cans.textBaseline = "Middle"
  //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
  cans.fillText(str + srt1, can.width / 8, can.height / 2)
  cans.fillText(srt2, can.width / 8, can.height / 2.3)
  cans.fillText(srt3, can.width / 8, can.height / 2.7)
  let div = document.createElement("div")
  div.id = id
  const styleStr = `
            position:fixed;
            visibility:visible !important;
            top:30px;
            width:${document.documentElement.clientWidth}px;
            height:${document.documentElement.clientHeight}px;
            left:0;
            z-index:100000;
            pointer-events:none;
            background:url('${can.toDataURL("image/png")}') left top repeat`
  div.setAttribute("style", styleStr)
  document.body.appendChild(div)；
  return id;
}

// 该方法只允许调用一次
watermark.set = (str, srt1, srt2, srt3) => {
  let id = setWatermark(str, srt1, srt2, srt3)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str, srt1, srt2, srt3)
    }
  }, 500)
  window.onresize = () => {
    setWatermark(str, srt1, srt2, srt3)
  }
}
// 移除
const outWatermark = id => {
  if (document.getElementById(id) !== null) {
    const div = document.getElementById(id)
    div.style.display = "none"
  }
}

watermark.remove = () => {
  const str = idd
  outWatermark(str)
}

// 将 watermark 的控制方法挂载到 window 对象上
window.watermark = watermark

export default watermark

PC端实现方法就如上啦！！