怎么用JavaScript实现网页视频添加水印
怎么用JavaScript实现网页视频添加水印
这篇“怎么用JavaScript实现网页视频添加水印”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用JavaScript实现网页视频添加水印”文章吧。
原理
通过html的页面布局，在video播放器层面，通过js控制dom,插入文本水印代码。
代码示例
index.html
<!DOCTYPEhtml><html><head><metaname="renderer"content="webkit"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>html5视频水印</title><scriptsrc="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><linkrel="stylesheet"type="text/css"href="css/waterMarkVideo.css"rel="externalnofollow"></head><body><divid="container"><div><divclass="watermarkvideo-watermark-multiplevideo-watermark-item"><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div><divclass="noselect"><spanclass="span"><span></div></div><videowidth="640px"height="360px"><sourcesrc="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_TheatricalTeaser_WeAreOverwatch_zhCN.mp4"type="video/mp4"/></video><divclass="pos"><imgsrc="img/i-play.png"width="40px"id="playBtn"/><div><progressvalue="0"id="progress"></progress></div><divclass="timebox"><spanid="time1">00:00:00</span>/<spanid="time2">00:00:00</span></div><imgsrc="img/i-fs.png"width="35px"id="full"/></div></div></div><scripttype="text/javascript">$(".span").html("water-mark");varvideo=document.querySelector("video");varplayBtn=document.getElementById("playBtn");playBtn.onclick=function(){if(video.paused){video.play();playBtn.src="img/i-pause.png";}else{video.pause();playBtn.src="img/i-play.png";}}varfull=document.getElementById("full");varcontainer=document.getElementById("container");vari=1;//定义一个变量，用于记录是否为全屏状态full.onclick=function(){i++;//对2取余，为0则全屏，否则关闭全屏if(i%2==0){//点击开启全屏if(container.requestFullScreen){container.requestFullScreen()}elseif(container.webkitRequestFullScreen){container.webkitRequestFullScreen()//谷歌}elseif(container.mozRequestFullScreen){container.mozRequestFullScreen()//火狐}elseif(container.msRequestFullscreen){container.msRequestFullscreen()//ie}$('video').css({"width":"100%","height":"100%"});$(".pos").css("width","100%");full.src="img/i-exitfs.png";}else{//关闭全屏if(document.cancelFullscreen){document.cancelFullscreen();}elseif(document.webkitCancelFullScreen){document.webkitCancelFullScreen();}elseif(document.mozCancelFullScreen){document.mozCancelFullScreen();}elseif(document.msExitFullscreen){document.msExitFullscreen();}$('video').css({"width":"640px","height":"360px"});$(".pos").css("width","640px");full.src="img/i-fs.png";}}functionnumber1(s){if(s<10){s="0"+s}else{s=""+s}returns;}vartime1=document.getElementById("time1");vartime2=document.getElementById("time2");vart1;//视频获取时间单位为秒，要对它进行一些数据的处理video.oncanplay=function(){ t1=video.duration;//获取视频总时长varh=parseInt(t1/3600);varm=parseInt(t1%3600/60);vars=parseInt(t1%60); time2.innerHTML=number1(h)+":"+number1(m)+":"+number1(s);//值显示在span标签中}//获取当前视频播放的时间video.ontimeupdate=function(){vart2=video.currentTime;varh=parseInt(t2/3600);varm=parseInt(t2%3600/60);vars=parseInt(t2%60);time1.innerHTML=number1(h)+":"+number1(m)+":"+number1(s);progress.max=t2;progress.value=t2/t1*progress.max;}video.onended=function(){progress.value=0; time1.innerHTML="00"+":"+"00"+":"+"00";//播放结束时时间清0;playBtn.src="img/i-play.png";//播放结束时按钮恢复}progress.onclick=function(e){//获取当前位置距离父级最左边的距离//left=progress.offsetLeft;//获取鼠标距离屏幕最左边的距离//e.clientX//获取鼠标距离当前元素最左边的距离varleft=e.offsetX;console.log(left);console.log(t1);video.currentTime=left/360*t1;}</script></body></html>
核心代码
$(".span").html("water-mark");
"water-mark"字段添加要打的水印内容。也可以动态添加水印内容。
样式waterMarkVideo.css代码
body,div,img{margin:0;padding:0;border:0;}#container{width:640px;border:1pxsolidpink;}.pos{width:640px;height:60px;background:rgba(0,0,0,0.5);margin-top:-63px;position:relative;}#playBtn{position:relative;top:10px;left:20px;cursor:pointer;}#progress{height:12px;width:100%;position:relative;top:-27px;cursor:pointer;}.timebox{position:absolute;top:20px;right:80px;cursor:pointer;color:white;}#full{position:absolute;top:12px;right:20px;cursor:pointer;}.video-watermark-item{left:15%;top:10%;font-size:20px;color:rgba(240,240,240,0.3);font-family:方正黑体;-o-transform:translate(-15%,-50%)rotate(-35deg);-webkit-transform:translate(-15%,-50%)rotate(-35deg);-moz-transform:translate(-15%,-50%)rotate(-35deg);-ms-transform:translate(-15%,-50%)rotate(-35deg);transform:translate(-15%,-50%)rotate(-35deg);position:absolute;overflow:hidden;}.noselect{display:inline-block;padding:100px;}
以上就是关于“怎么用JavaScript实现网页视频添加水印”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注恰卡编程网行业资讯频道。
