js实现视频播放时屏幕显示水印

let div = document.getElementById("videoPlayBox");
let divChild = div.firstChild;

var appDom = document.createElement("div");
  // appDom.id = "userName";//给这个元素设置id
  // appDom.setAttribute("class", "watermarkClass");//给这个元素设置类名
  // 你也可以直接就是行内样式
     appDom.style.cssText = `position:absolute;top:${this.topValue}px;left:${this.leftvalue}px; color:rgb(192, 196, 204);font-size:20px;opacity:0.5;`;
  // 再给这个元素写入要显示的水印内容
     appDom.innerText = text; // text就是你要显示的内容
  //插入元素
     divChild.appendChild(appDom);

setInterval(() => {
  // 先获取video所在区域的实际宽高 总不能直接让这个定位离开这个所在区域把 
     let widthValue = document.getElementById("videoPlayBoxWapper").offsetWidth;
     let heightValue =document.getElementById("videoPlayBoxWapper").offsetHeight;
// 然后就是取随机数 赋值给你刚才 top 跟 left 绑定的值
     this.leftvalue = widthValue * Math.random();
     this.topValue = heightValue * Math.random();
// 至此 基本就完事了  但是你运行起来后发现 top 跟 left虽然改变了 但是页面中却没有改变
     document.getElementById("userName").style.left = `${this.leftvalue}px`;
     document.getElementById("userName").style.top = `${this.topValue}px`;
 // 再加上这一步就完事了 
 }, 2000);

if (this.timer != null) {
     clearInterval(this.timer);
  }
  this.timer =  setInterval(() => {
  // 先获取video所在区域的实际宽高 总不能直接让这个定位离开这个所在区域把 
     let widthValue = document.getElementById("videoPlayBoxWapper").offsetWidth;
     let heightValue =document.getElementById("videoPlayBoxWapper").offsetHeight;
// 然后就是取随机数 赋值给你刚才 top 跟 left 绑定的值
     this.leftvalue = widthValue * Math.random();
     this.topValue = heightValue * Math.random();
// 至此 基本就完事了  但是你运行起来后发现 top 跟 left虽然改变了 但是页面中却没有改变
     document.getElementById("userName").style.left = `${this.leftvalue}px`;
     document.getElementById("userName").style.top = `${this.topValue}px`;
 // 再加上这一步就完事了 
 }, 2000);