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

置顶 已于 2024-03-27 21:59:26 修改
阅读量7.9k 收藏 12
点赞数 2
分类专栏： 视频处理 可视化 前端 AdminLTE BootStrap H5 文章标签： 音视频 h5添加水印 video 视频播放组件重写
于 2020-06-05 17:51:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40985985/article/details/106520347
版权

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

效果图如下：
在这里插入图片描述

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

  1. 在原视频上添加，由于每次登陆的用户不一样，需要根据用户名动态确定水印的文本值。这并不现实；
  2. 捕捉视频的每一帧，重新画在画布上，并添加水印。效果不太理想。捕捉到的帧失真严重；
  3. 和视频同一个页面，在其上边加类似蒙版，完美解决。

最终用方案3完美解决，源码如下：

<!DOCTYPE html>
<html
了解本专栏 订阅专栏 解锁全文 超级会员免费看
程序媛一枚~
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
订阅专栏
h5拍照添加水印上传
weixin_43709908的博客
08-04 1203
/** * 可预览图片 ++水印 名字 部门 当前时间 */ import React, { Component } from 'react'; import { ImagePicker } from 'antd-mobile'; import { Toast } from '@/pages/project/yjpt/components/PandaToast.jsx' import envconfig from "@/envconfig/envconfig"; import Carousel.
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]标记 这是最简单的情况。 以您喜
html5 网页视频水印 | js代码实现示例
洛阳泰山的博客
02-14 3403
HTML、CSS和JavaScript是构建现代网页的核心技术，它们相互配合，共同实现了网页的结构、样式和交互行为。下面将详细解释每种技术的特点和用法。
video视频在全屏播放也能添加水印
M_yI_Hg的博客
05-19 1169
这边需要注意的是: 必须追加到和video同级的父盒子里哦, 不然显示会有问题, 切记切记切记。追加到和video同级的父盒子。使用画布创建一个背景图片,创建一个div设置背景图片。好的, 先看下效果图。
HTML5 视频 Vedio 标签详解
最新发布
一名全栈开发工程师
05-31 2820
HTML5 引入了标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件。
【html5多媒体】自定义播放器（弹幕，水印，甚至在视频开头添加封面）
热门推荐
一名普通码农的菜地
09-23 1万+
前言想必很多时候各位同仁都用到了video标签这个家伙，然后各种各样自定义样式都会出来。。 但是通常通用性不会好到什么地方去。因为各个平台【安卓，ios，pc】及各个版本的浏览器对video的实现，样式及控制栏都会有所不同，要统一样式简直难上加难。 这里提供一种思路如何统一如何定制播放器甚至在播放视频前面加十几秒广告，再加十几秒大头像还有弹幕还有水印都绰绰有余，但这算是一个hack的方法，思路就
video增加水印，全屏不遮挡
Jeremy Liu的博客
02-09 1971
但是使用video播放器自带的全屏按钮全屏时，水印图层不显示，这是因为播放器自带的全屏按钮全屏时仅将当前video标签全屏，并置于页面最顶层。无法通过z-index修改层级；
video 添加水印
weixin_38655844的博客
09-18 298
注意： canvas 必须跟 video 在同一级。
H5多图片压缩加水印上传
yi_an的博客
08-27 3223
1、环境配置开发语言：php+H5 框架：thinkPHP3.2+WeUI 服务器：阿里云centos7(客户主机是WD的Windows虚拟主机)2、场景描述最近在做微信公众号的全栈开发，涉及到一个图片上传水印的功能。因为使用的是tp框架，所以其实框架内部里面集成好了一些很方便的图片处理的工具类，只要开启php相关扩展就好了。但是由于虚拟主机受限，加上服务器性能较差，因此决定在网页前端使用H5的
ui-app H5和小程序 使用canvas 上传图片 添加水印
shanshanbao的博客
11-21 269
ui-app H5和小程序 使用canvas 上传图片 添加水印
h5添加水印
大左的博客
11-01 1137
此的水印结构为工号-姓名-yyyy/mm-dd HH：MM
主流影视网站8合一H5源码.zip
03-27
在描述中提到的“图片加水印打码工具”，是源码中的一项关键功能。该工具利用HTML5的Canvas API，可以在用户本地对图片进行处理，添加自定义的水印或打码，保护创作者的版权和用户隐私。Canvas API是HTML5的一个强大...
PHPCMS V9.6.6 修改版
07-24
7. 修改后台缩略图裁切图片，移除Flash裁切改为H5裁切 8. 后台附件上传修改为H5上传，会员头像上传修改为H5上传 9. 修改后台界面，修改后台登录界面、后台锁屏界面、后台内容界面 10. 修改前台界面 11. 修复已知BUG ...
一般的视频网站是如何给视频加水印的？？
weixin_35754676的博客
01-11 162
一般来说，视频网站会在视频上叠加一个透明的图片水印。这个图片可能是网站的 logo，或者是其他形式的文字或图像。这样做的目的是防止视频被盗用或未经授权地复制和传播。 一般的实现方式可以使用视频编辑软件进行合成，或者在视频网站的后端服务器上使用脚本语言进行处理，如在上传视频之前加水印，或者在播放视频时动态加水印。 ...
h5怎么在图片上添加文字_在图片上添加水印？这里有超级简单的方法
weixin_42365539的博客
12-26 1435
在生活中时常会遇到添加水印的图片，那么如何制作水印呢？使用PS？今天这里有一份超级简单的水印制作方法。让我们一起来制作一下水印吧！第一步：下载安装处理水印的软件。第二步：打开软件，点击选择图片加水印。第三步：单击添加文件，将需要加水印的照片选中，点击打开文件。第四步：打开后如图所示。点击添加文字水印。第五步：在编辑栏中录入自己要添加的文字，通过修改文字的字体，字号大小，做出大小比例合适的文字水印。...
前端视频加水印
思渝崖
12-06 3557
video.js,watermark,视频水印
前端增加水印
pingping_wang的博客
06-12 289
addWatermark:function(el,color, text, bgPos, bgSize, font){ var wdh = 400; var hgh = 280; if (font) { wdh = font[0]; hgh = font[1]; } var baseTxt = (text == '') ?..
如何快速给视频添加水印？
qs1137981843的博客
09-06 505
所以当我们在发布视频之前，非常有必要在视频上添加水印，这样在很大程度上能减少视频被盗用的情况的发生。”的方法介绍，四个步骤介绍的相对清晰，最重要的是第二步设置水印的环节，不过只要大家操作一遍基本都能学会，因为这个方法还是比较傻瓜式的，任何人都能使用，上班族用这个添加水印更加的高效。对于很多人来说，给视频添加水印是一件相对比较麻烦的事情，首先大部分人可能还从没操作过，所以完全不知道从何下手，鉴于有些小伙伴们不知道如何操作，下面小编就来给大家介绍一个快速给视频添加水印的方法，小编的步骤比较详细，能轻松学会。
如何给视频加水印标记？分享三个好用方法给你
qq_39712383的博客
11-18 998
现在给视频加水印已经不再单单是起到一个防盗的作用了，还可以是标明视频的出处或者著作权，甚至是打广告等作用，尤其是要上传到一些视频网站的视频，更应该打上自己专属的水印。那你们知道怎么给视频加水印吗？还不知道的小伙伴一起来看看吧！方法一：借助“无痕去水印”去实现给视频加水印的操作。这是一款功能丰富的软件，支持用户进行图片加水印、视频画面裁剪、视频加水印等操作，并且软件兼容多种视频和图片格式进行处理，其中它的“视频加水印”功能操作简单，新手也能轻松实现，这里就以“加文字水印”的方式给大家展示一下它的操作。具体操作
写一段使用h5 video 播放视频代码
04-22
好的，以下是基本的使用HTML5 Video标签播放视频的代码： ``` <video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 在上面的代码中，width和height属性设置了视频播放器的宽度和高度。在`<source>`标签中指定了视频文件的路径和MIME类型。如果浏览器不支持video标签，则会显示由`Your browser does not support the video tag.`文本所指示的备用文本。"controls"属性将显示用于播放、暂停和调整音量的控件。简单的视频播放就是这么简单！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序媛一枚~

您的鼓励是我创作的最大动力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值