h5 video视频播放的同时加水印，图片加水印同样的原理
生活随笔
收集整理的這篇文章主要介紹了
h5 video视频播放的同时加水印，图片加水印同样的原理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
經常能看到播放視頻的網站上加水印的效果，記錄下成果以備后續看：
效果圖如下：
h5頁面視頻播放的同時加水印，有以下3種方法可嘗試：
- 在原視頻上添加，由于每次登陸的用戶不一樣，需要根據用戶名動態確定水印的文本值。這并不現實；
- 捕捉視頻的每一幀，重新畫在畫布上，并添加水印。效果不太理想。捕捉到的幀失真嚴重；
- 和視頻同一個頁面，在其上邊加類似蒙版，完美解決。
最終用方案3完美解決，源碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.1.1.min.js"></script>
<style type="text/css">.video-watermark-item {left: 16.7%;font-size: 20px;color: rgba(0,0,255,1.00);font-family: 方正黑體;-o-transform: translate(-50%, -50%) rotate(-35deg);-webkit-transform: translate(-50%, -50%) rotate(-35deg);-moz-transform: translate(-50%, -50%) rotate(-35deg);-ms-transform: translate(-50%, -50%) rotate(-35deg);transform: translate(-50%, -50%) rotate(-35deg);position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風光無限好</title>
</head>
<body><div style="position: absolute; width: 100%; left: 0; top: 0;height:100%;overflow:hidden"><video onclick="playPause()" id="video1" controls controlslist="nodownload fullscreen noremoteplayback" oncontextmenu = "return false" style="width: 100%;height:100%; object-fit: fill"><source src="video/WeChat_20200603105857.mp4" type="video/mp4"/>風光無限好</video><div class="watermark video-watermark-multiple"><div class="video-watermark-item noselect" style="top:20.7%;left:16.7%;"><span class="span"><span></div><div class="video-watermark-item noselect" style="top:50%;left:50%;"><span class="span"><span></div><div class="video-watermark-item noselect" style="top:78.3%;left:80.3%;"><span class="span"><span></div></div>
</div> <script type="text/javascript">$(".span").html("test Watermark Zhangsan");var myVideo=document.getElementById("video1");$('#video1').bind('contextmenu',function() { return false; });function playPause(){ if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script>
</body>
</html>
方案2也嘗試了下： 讀取視頻幀每一幀添加水印后，然后畫在畫布上；視頻有失真情況，對于19201080的失真很嚴重，這是原始960540的視頻稍有失真，效果如下：
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.1.1.min.js"></script>
<style type="text/css">.video-watermark-item {left: 16.7%;font-size: 10px;color: rgba(0,0,255,1.00);font-family: 方正黑體;-o-transform: translate(-50%, -50%) rotate(-35deg);-webkit-transform: translate(-50%, -50%) rotate(-35deg);-moz-transform: translate(-50%, -50%) rotate(-35deg);-ms-transform: translate(-50%, -50%) rotate(-35deg);transform: translate(-50%, -50%) rotate(-35deg);position: absolute;}canvas {background: #000;width: 480px;height: 270px;}
</style>
<script>window.onload = function () {var myImage = document.getElementById('canvas');var cobj = myImage.getContext('2d');//獲取繪圖環境var video = document.getElementById('video1');// cobj.drawImage(img, 200, 200, 200, 200);//把圖片畫在畫布上myImage.onDoubleClick = function () {video.pause();}myImage.onclick = function () {video.play();// alert(video.width+' '+video.height);// alert(1);var scaleInput = 0.5;video.addEventListener('play', function () {//畫布上畫視頻，需要動態地獲取它，一幀一幀地畫出來setInterval(function () {video.width = 960;video.height = 540;cobj.drawImage(video, myImage.width / 2 - video.width / 2, myImage.height / 2 - video.height / 2);cobj.clearRect(0, 0, myImage.width, myImage.height);cobj.save();cobj.translate(myImage.width / 2 - video.width / 2 * scaleInput, myImage.height / 2 - video.height / 2 * scaleInput);cobj.scale(scaleInput, scaleInput);cobj.drawImage(video, 0, 0);cobj.restore();}, 500);});}}
</script>
</head>
<body>
<div style="width: 480px;height: 270px;">
<canvas id="canvas" onclick="playPause()" style="object-fit: fill;">
</canvas>
</div>
<div style="width: 10%;height: 10%;"> </div>
<div style="width:30%; height:30%;top: 70%;border-left: 50%;left: 50%; "><video onclick="playPause()" id="video1" controls controlslist="nodownload fullscreen noremoteplayback" oncontextmenu = "return false" style="width: 100%;height:100%; object-fit: fill"><source src="video/WeChat_20200603105857.mp4" type="video/mp4"/>風光無限好</video><div class="watermark video-watermark-multiple"><div class="video-watermark-item noselect" style="top:10%;left:8%;"><span class="span"><span></div><div class="video-watermark-item noselect" style="top:25%;left:19%;"><span class="span"><span></div><div class="video-watermark-item noselect" style="top:38%;left:30%;"><span class="span"><span></div></div>
</div> <script type="text/javascript">$(".span").html("Seminar ~~~ 😍😍");var myVideo=document.getElementById("video1");$('#video1').bind('contextmenu',function() { return false; });function playPause(){ if (myVideo.paused) myVideo.play(); else myVideo.pause(); }
</script></body>
</html>
以上的倆種對于非全屏情況下都生效，全屏情況下video級別超高，水印會消失。解決辦法：重寫controls完美解決
參考：
- https://blog.csdn.net/qq_22557797/article/details/72866358?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
- https://www.jianshu.com/p/f71d1284eaf8
總結
以上是生活随笔為你收集整理的h5 video视频播放的同时加水印，图片加水印同样的原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 考摩托车驾照多少钱啊？
- 下一篇： 使用Python、OpenCV计算轮廓的