How to use JavaScript to add watermark to webpage video

Most people don't understand the knowledge points of this article "How to add watermark to web video with JavaScript", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "How to add watermark to web video with JavaScript".

principle

Through html page layout, at the video player level, through js control dom, insert text watermark code.

code example

index.html

html5 video watermark

00:00:00 / 00:00:00

$(".span").html("water-mark"); var video = document.querySelector("video"); var playBtn = 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"; } } var full = document.getElementById("full"); var container = document.getElementById("container"); var i = 1;//定义一个变量，用于记录是否为全屏状态 full.onclick = function(){ i++;//对2取余，为0则全屏，否则关闭全屏 if(i%2==0){//点击开启全屏 if(container.requestFullScreen){ container.requestFullScreen() }else if(container.webkitRequestFullScreen){ container.webkitRequestFullScreen()//谷歌 }else if(container.mozRequestFullScreen){ container.mozRequestFullScreen()//火狐 }else if(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(); }else if(document.webkitCancelFullScreen){ document.webkitCancelFullScreen(); }else if(document.mozCancelFullScreen){ document.mozCancelFullScreen(); }else if(document.msExitFullscreen){ document.msExitFullscreen(); } $('video').css({"width":"640px","height":"360px"}); $(".pos").css("width","640px"); full.src = "img/i-fs.png"; } } function number1(s){ if(s