js實現(xiàn)視頻播放時屏幕顯示水印

更新時間：2023年10月18日 08:24:22 作者：xxnobug

這篇文章主要為大家詳細介紹了js如何實現(xiàn)視頻播放時屏幕顯示水印的效果,文中的示例代碼講解詳細,對我們深入掌握js有一定的幫助,感興趣的小伙伴可以跟隨小編一起學習一下

需求描述：視頻在播放的時候能夠顯示當前觀看人的姓名并隨機切換位置

內心Os：這個加水印不是視頻剪輯工具的功能嗎為啥要讓前端來寫什么鬼[崩潰] 沒辦法崩潰歸崩潰需求還得寫啊

思路：既然是在視頻播放的時候那就跟video標簽在同一級Dom中用css定位來實現(xiàn)浮動在視頻之上不就可以了？有想法就干

上來我就是直接獲取video所在的Dom元素因為我的video是包裹在class是videoPlayBox的div中所以我先獲取到了video的父元素然后在獲取父元素中下屬元素

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

創(chuàng)建一個容納水印數(shù)據(jù)的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);

這樣基本一個水印插入就完成了下面就是實現(xiàn)隨機出現(xiàn)位置都用position:absolute 肯定就是隨機改變top跟left就可以了寫一個定時器比如說2秒換一次位置

setInterval(() => {
  // 先獲取video所在區(qū)域的實際寬高 總不能直接讓這個定位離開這個所在區(qū)域把 
     let widthValue = document.getElementById("videoPlayBoxWapper").offsetWidth;
     let heightValue =document.getElementById("videoPlayBoxWapper").offsetHeight;
// 然后就是取隨機數(shù) 賦值給你剛才 top 跟 left 綁定的值
     this.leftvalue = widthValue * Math.random();
     this.topValue = heightValue * Math.random();
// 至此 基本就完事了  但是你運行起來后發(fā)現(xiàn) top 跟 left雖然改變了 但是頁面中卻沒有改變
     document.getElementById("userName").style.left = `${this.leftvalue}px`;
     document.getElementById("userName").style.top = `${this.topValue}px`;
 // 再加上這一步就完事了 
 }, 2000);

當然當定時運行的時候就要考慮到多次觸發(fā)這個定時器就會異步全部執(zhí)行會導致出現(xiàn)的時間根本不是你設置的時間所以你要在觸發(fā)這個方式的時候先清除定時器然后在執(zhí)行就會避免這個問題

if (this.timer != null) {
     clearInterval(this.timer);
  }
  this.timer =  setInterval(() => {
  // 先獲取video所在區(qū)域的實際寬高 總不能直接讓這個定位離開這個所在區(qū)域把 
     let widthValue = document.getElementById("videoPlayBoxWapper").offsetWidth;
     let heightValue =document.getElementById("videoPlayBoxWapper").offsetHeight;
// 然后就是取隨機數(shù) 賦值給你剛才 top 跟 left 綁定的值
     this.leftvalue = widthValue * Math.random();
     this.topValue = heightValue * Math.random();
// 至此 基本就完事了  但是你運行起來后發(fā)現(xiàn) top 跟 left雖然改變了 但是頁面中卻沒有改變
     document.getElementById("userName").style.left = `${this.leftvalue}px`;
     document.getElementById("userName").style.top = `${this.topValue}px`;
 // 再加上這一步就完事了 
 }, 2000);

到此這篇關于js實現(xiàn)視頻播放時屏幕顯示水印的文章就介紹到這了,更多相關js水印內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: