html5 网页视频水印 | js代码实现示例

泰山AI

已于 2023-08-03 14:10:40 修改

阅读量3.7k

点赞数 5

分类专栏：付费粉丝专栏文章标签： html5 video watermark

于 2022-02-14 13:49:29 首次发布

本文链接：https://blog.csdn.net/weixin_40986713/article/details/122922783

版权

付费粉丝专栏专栏收录该内容

123 篇文章 ¥19.90 ¥99.00

订阅专栏

示例图

原理

通过html的页面布局，在video播放器层面，通过js控制dom,插入文本水印代码。

代码示例

index.html

<!DOCTYPE html>
<html>
<head>
	<meta name="renderer" content="webkit" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport&#

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

泰山AI

关注关注

5
点赞
踩
14

收藏

觉得还不错? 一键收藏
6
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

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

qq_40985985的博客

06-05

8471

经常能看到播放视频的网站上加水印的效果，记录下成果以备后续看： h5 video 视频播放的同时动态加水印文本：和视频同一个页面，在其上边加类似蒙版，完美解决。全屏情况下video 层级超高水印会消失，解决办法重写controls，把包含video，水印div的最外边的div全屏，完美解决；......

iframe展示html源代码,遮罩层 + Iframe实现界面自动显示的示例代码

weixin_34966467的博客

06-09

975

前言这周由于科三的考试耽误了两天，提前一天要去熟悉考场，第二天要考试，好在第二天晚上赶回来了，两天没敲代码就感觉别扭，这周写了点日志系统，写了点作业系统，果然技术还不到家，思路上出了点小问题。效果在教师评阅作业时，先把学生的作业展现出来，然后关掉界面进行评分(用百度主页做演示)Iframeiframe 用于在网页内显示网页，实现它的方法有多种：URL 指向隔离页面的位置，由于当时对src有误解，所...

6 条评论您还未登录，请先登录后发表或查看评论

videojs-watermark:一个videojs插件，可向videojs播放器添加水印

05-28

不再保留此副本！如果您有兴趣维护它，请写信给。 videojs-watermark 在视频播放器中添加水印图像。在初始“ fadeTime”之后，当显示视频播放器控件时，将显示水印。这也提供了使用水印作为链接的能力。安装 npm install --save videojs-watermark 配置 image：必填要用作水印的图像的URL。 position：放置水印的位置（左上，右上，左下，右下）。默认为“右上”。 fadeTime：初始水印淡入的时间（以毫秒为单位）。默认值为3000。要使水印永久可见，请使用null 。 url：从水印链接到的URL。如果用户单击水印，视频将被暂停，并且链接将在新窗口中打开。用法要将videojs-watermark包含在您的网站或Web应用程序中，请使用以下任何一种方法。 [removed]标记这是最简单的情况。以您喜

HTML 视频（Video）

最新发布

unber的博客

03-15

356

在 HTML 中播放视频的方法有很多种。

Watermark_NodeJS:为视频添加水印的节点脚本

05-29

水印_视频_服务器一个 NodeJS 脚本，可以像 tiktok 一样在视频和文本上放置徽标。克隆存储库，运行命令“npm install” 现在，在存储库文件夹中添加徽标名称为“ logo.png”的图像在运行脚本之前，您需要将 ffmpeg 安装到 Program Files 文件夹并将“path/ffmpeg/bin”添加到您的路径环境变量中您可以从下载最新版本的完整版本安装 ffmpeg 并使用“节点服务器”运行脚本打开浏览器并打开此链接进行测试在此网址中，您可以将“用户名”更改为您的姓名，最后一个文件将作为文件类型下载。您必须在下载文件的末尾添加“.mp4”才能观看添加的徽标文件。可选的：此脚本还可以在执行此过程时删除本地文件，为此只需在每个响应命令中取消注释 deletefiles 方法即可。它不是一个很好的脚本，但如果您喜欢它，可以随时用作

js实现视频播放时屏幕显示水印

weixin_44167138的博客

10-17

497

当然当定时运行的时候就要考虑到多次触发这个定时器就会异步全部执行会导致出现的时间根本不是你设置的时间所以你要在触发这个方式的时候先清除定时器然后在执行就会避免这个问题。这样基本一个水印插入就完成了下面就是实现随机出现位置都用position:absolute 肯定就是随机改变top跟left就可以了写一个定时器比如说2秒换一次位置。思路：既然是在视频播放的时候那就跟video标签在同一级Dom中用css定位来实现浮动在视频之上不就可以了？

videojs-watermark:一个videoJS插件，用于在视频上显示水印

05-14

Video.js水印一个插件通过在视频顶部显示一个watermak。使用插件当您在页面中包含“ videojs.watermark.js”时，该插件会自动注册： [removed][removed] 您可能也想包括默认样式表。它可以处理在视频上显示图像的操作： <link href="videojs.watermark.css" rel="stylesheet"> 创建视频元素后，即可激活水印插件。该插件有5个选项file和xpos以及ypos and xrepeat和opacity。它使用CSS在视频上显示图像。 video.watermark({ file: 'watermarks.png', xpos: 50, ypos: 50, xrepeat: 0, opacity:

JavaScript 视频处理攻略打造个性化水印添加技巧

jqrrgmvtk的专栏

11-29

207

在 JavaScript 中处理视频，特别是添加个性化水印，通常需要依赖一些强大的视频处理库。这些库提供了丰富的 API，使得视频处理变得简单而高效。

html5 canvas实现给图片添加平铺水印

12-14

HTML5 Canvas 是一种在网页上绘制图形的API，它允许开发者动态生成图像或者对现有图像进行操作。在本例中，我们使用Canvas来实现在图片上添加平铺水印的功能。这个需求通常用于保护版权或者增加品牌标识。下面将详细...

使用html2canvas.js实现页面截图并显示或上传的示例代码

09-22

通过上述的介绍和代码示例，我们了解到了使用html2canvas.js实现页面截图的核心知识点和可能遇到的常见问题，以及如何解决这些问题。在实际应用中，除了上述内容，还需要考虑性能优化、兼容性处理以及用户体验等问题...

html5media1.2.2(去水印).zip

02-24

在这个项目中，`index.html`可能会展示一个使用HTML5Media库的示例，包括如何嵌入音频或视频，以及如何利用JavaScript进行交互。 `js`文件夹可能包含HTML5Media库的源代码和其他相关脚本。这些脚本可能包括了初始化...

视频水印

08-03

NULL 博文链接：https://zhangmingwei.iteye.com/blog/1991345

Javascript 网页水印(非图片水印)实现代码

12-10

1 概述 1.1 定义在一些B/S结构的应用系统中，有很多页面是需要有水印的。常见的就是公文系统、合同系统等。大家常常关注的是网站图片增加水印，而很少关注页面水印。刚去Google了一圈，关于页面水印的文章的数量为几乎为0. 本文中，流牛木马就与大家一起交流一下有关制作网页水印的心得。本文讨论以下的情形：新增水印的方法需要用Javascript完成，并要求能够方便地加入到原有的页面中，不能影响到已有的功能。 1.2 预期目标就图片水印实现方案来说，我们预期至少包括以下几个目标： 1. 实现悬浮、半透明的图片水印 2. 包含水印的页面，所有元素均为只读(不可写) 3. 在包含框架页面中，

基于jsp实现图片网页视频加水印

06-12

软件工程大作业，实现了网页加水印，上传图片加水印，上传视频加水印资源包括代码和课设文档

jquery实现的网页水印

07-16

利用jquery实现的在页面添加水印，并且使用了jquery的resizeend实现了，根据窗口调整大小自动适应添加水印

php 生成多个水印,php实现多张图片上传加水印技巧

weixin_36325174的博客

03-09

196

function imageWaterMark($groundImage,$waterPos=0,$waterImage="",$waterText="",$textFont=5,$textColor="#FF0000"){$isWaterImage = FALSE;$formatMsg = "暂不支持该文件格式，请用图片处理软件将图片转换为GIF、JPG、PNG格式。";//读取水印文件if(!...

videojs-dynamic-watermark: video.js 视频添加文字水印

weixin_42490897的博客

06-15

2817

videojs-dynamic-watermark: video.js 视频添加文字水印，随机移动

前端视频加水印

思渝崖

12-06

4459

video.js,watermark,视频水印

JS添加水印的工具方法

weixin_43979866的博客

07-04

519

JS给页面添加水印的工具方法