js实现视频播放时屏幕显示水印
作者：xxnobug
这篇文章主要为大家详细介绍了js如何实现视频播放时屏幕显示水印的效果,文中的示例代码讲解详细,对我们深入掌握js有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
需求描述：视频在播放的时候能够显示当前观看人的姓名并随机切换位置
内心Os：这个加水印不是视频剪辑工具的功能吗 为啥要让前端来写 什么鬼[崩溃] 没办法崩溃归崩溃 需求还得写啊
思路：既然是在视频播放的时候 那就跟video标签在同一级Dom中 用css定位来实现浮动在视频之上 不就可以了？ 有想法就干
上来我就是直接获取video所在的Dom元素 因为我的video是包裹在class是videoPlayBox的div中 所以我先获取到了video的父元素 然后在获取父元素中下属元素
let div = document.getElementById("videoPlayBox");
let divChild = div.firstChild;创建一个容纳水印数据的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);到此这篇关于js实现视频播放时屏幕显示水印的文章就介绍到这了,更多相关js水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！