當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

h5 video视频播放的同时加水印，图片加水印同样的原理

發布時間：2023/11/27 生活经验 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 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%;">&nbsp;&nbsp;</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视频播放的同时加水印，图片加水印同样的原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

3atv精品不卡视频,97人人超碰国产精品最新,中文字幕av一区二区三区人妻少妇,久久久精品波多野结衣,日韩一区二区三区精品

生活经验

h5 video视频播放的同时加水印，图片加水印同样的原理

以上的倆種對于非全屏情況下都生效，全屏情況下video級別超高，水印會消失。解決辦法：重寫controls完美解決

參考：

總結