经常能看到播放视频的网站上加水印的效果，记录下成果以备后续看：

效果图如下：

h5页面视频播放的同时加水印，有以下3种方法可尝试：

  1. 在原视频上添加，由于每次登陆的用户不一样，需要根据用户名动态确定水印的文本值。这并不现实；
  2. 捕捉视频的每一帧，重新画在画布上，并添加水印。效果不太理想。捕捉到的帧失真严重；
  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 ~~~ 												


											

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

    
						
  1. php 给视频打水印,如何给视频加表情 给视频局部画面加动态图片或水印
		
    如何给视频加表情 给视频局部画面加动态图片或水印 /// 如何给视频加贴图(图片或水印) 视频添加贴图软件中的给视频叠加贴图功能,也是我们通常所说的给视频加图片或给视频加水印.同时,它也包括我们在&l ...
    
		
    2. 
								
  2. 图片水印怎么加？图片加水印方法分享
		
    相信大家在日常生活中,都会在各个平台上分享自己拍摄的照片吧,但大家在收到网友的好评和点赞的同时,是不是会因为担心图片被别人转发或者是拿去做一些不好的事情而感到烦恼呢?其实要解决这个烦恼很简单,那就是给 ...
    
		
    3. 
						
  3. ps web html超链接手机图片,怎么在图片上加超链接 图片加超链接的方法，点击图片跳转到指定网页...
		
    产品解决方案 gif动画制作怎样把图片做成动态图?两张图片加自然过渡效果制作成动图循环播放 元旦贺卡制作元旦节贺卡怎么做?元旦电子贺卡制作教程|元旦贺卡制作方法过程 关于圣诞节的ppt如何制作圣诞节p ...
    
		
    4. 
						
  4. 批量html水印,图片批量水印工具-MetInfo帮助中心
		
    # 图片批量水印工具 ### 功能介绍 - 1.批量给网站详细大图.缩略图添加文字或图片水印: - 2.文字水印相关设置,包括水印文字位置(九个位置可以选择).字体颜色.字体.字号: - 3.图片水印 ...
    
		
    5. 
						
  5. 微信小程序 首次页面加载 图片加载 加载页面时候会闪一下
		
    微信小程序 图片加载 image标签如果不给高度 加载页面时候会闪一下 至于原因,我的理解是:小程序图片闪烁是因为图片没有高度,加载时从第最高高度变到最适合高度的过程,高度加载是需要一定时间计算的 解 ...
    
		
    6. 
						
  6. 微信 安卓 H5 video视频播放自动全屏
		
    这里写自定义目录标题 1.(安卓手机)微信中禁止点击视频自动全屏 2.禁止显示进度条 本文是为了自己防止忘记了在此记录,如果不足之处还望指出一起学习 腾讯微信X5内核浏览器文档地址:https://x ...
    
		
    7. 
						
  7. php 滚动彩色文字,滚动文字特效大全 -★用彩色生成器加文字,图片加文字,带背景的链接滚动文字...
		
    霍斯 的 滚动文字特效大全http://www.sudu8.cn/sudu8_article/87/471.html 带背景的链接滚动文字http://font.itbulo.com/ 代码如下: 对 ...
    
		
    8. 
						
  8. c# 图片加图片水印、文字水印和图片文字水印
		
    加水印类: Code using System; using System.Drawing; using System.Drawing.Imaging; using System.Drawing.Dr ...
    
		
    9. 
						
  9. C# 图片加水印例程
		
    using System; using System.IO; using System.Collections; using System.Drawing; using System.Drawing. ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. keras中conv2d,conv2dTranspose的Padding详细介绍
		
    2. 
						
  2. TinyCrayon-iOS-SDK：强大到使人惊讶的 Mask 及切图工具库
		
    3. 
						
  3. jquery 开发总结(不断更新)
		
    4. 
						
  4. 转：linux的源码查看, c++语法 查看网站
		
    5. 
						
  5. mysql less6教程_Sqli labs系列-less-56  报错注入法（上）
		
    6. 
						
  6. Python IDLE 基本操作
		
    7. 
						
  7. 面对疾风吧！io_uring 优化 nginx 实战演练
		
    8. 
						
  8. php 开启memcache,php开启与安装 memcache
		
    9. 
						
  9. OS X Eagle Peak：据说这是 Mac 新系统名称
		
    10. 
						
  10. mysql字段命名_数据库表及字段命名规范
		
    11. 
						
  11. docker 批量关闭处于exited状态的container容器--shell工具
		
    12. 
						
  12. 咸鱼3D打印—3D打印的基本流程
		
    13. 
						
  13. C++11线程中的几种锁
		
    14. 
						
  14. 60著名条原则和定理
		
    15. 
						
  15. Youtube 预装到系统后运行报错
		
    16. 
						
  16. SpringBoot 启动类  @SpringBootApplication 注解 以及执行流程
		
    17. 
						
  17. 关于java.lang.ArithmeticException
		
    18. 
						
  18. 阿里云oss文件服务器
		
    19. 
						
  19. 登录华科校园网，我用Socket
		
    20. 
						
  20. 智慧校园-实验室预约介绍
		
    21. 
		

	


热门文章
	

    
									
  1. View requires API level 21 (current min is 15): Toolbar
			
    2. 
						
  2. Docker基本命令汇总
			
    3. 
						
  3. 写单元测试应该注意什么
			
    4. 
						
  4. 13装饰器和内置函数
			
    5. 
						
  5. [CF888G]Xor-MST
			
    6. 
						
  6. 【转载】Linux 软件安装到 /usr，/usr/local/ 还是 /opt 目录？
			
    7. 
						
  7. 【动态规划】Part1
			
    8. 
						
  8. 6.微信小程序的如何使用全局属性
			
    9. 
						
  9. 深入理解JVM(二)--垃圾收集算法
			
    10. 
						
  10. python操作mysql（二）
			
    11.