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

需求描述：视频在播放的时候能够显示当前观看人的姓名并随机切换位置
内心Os：这个加水印不是视频剪辑工具的功能吗 为啥要让前端来写 什么鬼[崩溃] 没办法崩溃归崩溃 需求还得写啊
思路：既然是在视频播放的时候 那就跟video标签在同一级Dom中 用css定位来实现浮动在视频之上 不就可以了？ 有想法就干

1. 上来我就是直接获取video所在的Dom元素 因为我的video是包裹在class是videoPlayBox的div中 所以我先获取到了video的父元素 然后在获取父元素中下属元素

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

2. 创建一个容纳水印数据的Dom元素并给他样式

  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);

这样基本一个水印插入就完成了 下面就是实现随机出现位置 都用position:absolute 肯定就是随机改变top跟left就可以了 写一个定时器 比如说2秒换一次位置

 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);

至此 完事