腾讯云云点播如何对视频添加复杂水印_音视频解决方案_同尘科技

云点播 2年前 (2023-05-26) 浏览 79

云点播 水印 提供的图片水印和文字水印,可以实现简单水印的需求。但对于复杂水印需求(例如图文混排水印、滤镜等),支持难度大。为此,云点播引入 SVG(Scalable Vector Graphics) 水印,使用者可以方便、灵活地定制水印内容,即可自由排列图文内容,支持绘图、添加滤镜、渐变等特效。

介绍 SVG

SVG(Scalable Vector Graphics) 是一种基于 XML 的标记语言,用来描述二维矢量图像的开放网络标准,已经广泛应用于各种网络标准,例如 CSS、DOM、JavaScript 等。云点播不仅对 SVG 宽高没有限制,而且会自动计算出能包含完整元素的最小矩形,并以此作为 SVG 水印原始大小(宽高)。例如,计算最小矩形得出下图虚线包围的部分:
说明:线上有许多基于 Web 且免费的 SVG 在线调试工具,您可通过此类工具绘制满意的图形,完成后即可导出 XML。对于精细化设置(例如元素对齐属性、字体大小等),可手工修改 XML。确认最终效果,得到 XML 代码。

使用 SVG 水印流程

步骤1:调试 SVG 水印效果

1. 通过 SVG 调试工具(如简单的在线 HTML 所见即所得编辑工具或者操作更丰富的在线 SVG 编辑器),调试满意的图形,操作全程所见即所得。完成后,也可将 SVG 保存为后缀 .html 文件后使用浏览器打开查看效果。说明:若不同元素间有对齐需求,建议灵活运用各元素的对齐类属性,通过改变元素内容验证是否有效(例如图文混排,增减文本长度,查看图片和文字是否始终满足对齐的需求)。完整教程参考SVG 教程。具体案例可参见本文下面的 示例。

步骤2:创建 SVG 水印模板

调用 创建水印模板 接口,指定水印位置、宽高等信息。创建完成得到水印模板 ID。

步骤3:添加 SVG 视频水印

关于如何发起视频处理任务并获取任务结果,请参见 视频处理任务体系。
以 视频处理 接口进行说明。在 示例2 发起带水印的转码任务,WatermarkSet.N.Definition 使用步骤2得到的模板 ID,另外,由于我们使用 SVG 水印,所以需要传入步骤1得到的 XML 至参数 WatermarkSet.N.SvgContent

示例

下文将通过具体的案例为您介绍如何添加复杂水印,实现文本可变的图文混排的水印。

需求描述

某客户需要对视频添加水印,要求如下:水印由品牌 Logo 和登录用户的账号 ID(文本)组成。水印置于视频右上角,水印原点 距离视频右边框偏移大小为视频宽度的 2%,距离视频上边框偏移大小为视频高度的 5%。水印宽度为视频短边的 30%,高度按原图等比例缩放。文字向上和向右对齐品牌 Logo。文字字体为黑体,背景颜色为白色,带有高斯模糊阴影,阴影颜色为黑色。品牌 Logo 不缩放时文字大小为 50 像素。

步骤1:调试 SVG 水印效果

SVG 的 XML 源码如下:

                                                
@张三 @张三

验证效果:方式1:将上面这段代码复制到 在线 HTML 所见即所得编辑工具 页面左侧的文本输入框,然后单击页面上的 Run 按钮,效果在页面右侧生成。如下图:
方式2:将上面这段代码保存至后缀为 .html 的文件,在浏览器打开可看到水印效果为图2:白色背景。

图1:透明背景 图2:白色背景 图3:黑色背景
  

SVG 说明

参数 说明 属性
定义 SVG 画布 width="1000px" height="1000px":宽高均为 1000px,这里只要能够包含 SVG 里完整元素即可。
定义要用到的滤镜
高斯模糊滤镜 stdDeviation="2"
滤镜元素偏移 dx="0" dy="3":设置滤镜元素「向下」偏移 3 个像素。
品牌 Logo 图片 xlink:href="data:image/png;base64,{图片数据的 base64}":引用本地图片。height="185px" width="256px":原始图片的宽高。x="74.4%" y="0px":根据需求,图片在上面,所以 y 轴偏移设置为 0px,通过不断 调整x值确认效果,最终确定x="74.4%"符合预期。
实现文字阴影效果 font-family="SimHei" font-style="Regular" font-size="50px":设置字符的字体及大小。text-anchor="end":设置字符的对齐方式,文本字符串的末尾即当前文本的初始位置。x="100%":设置元素沿 x 轴偏移至「最右侧」。通过设置text-anchorx 属性,我们将文字的最后一个字符「固定」在 SVG 画布的「最右侧」,方便调整品牌 Logo 的位置(标签x 属性)。style="opacity:1;":设置透明度为不透明。fill="black":设置填充颜色为黑色。filter="url(#filter):使用 id 为 filter 的滤镜。y="245px":设置元素 y 轴偏移大小,由于品牌 Logo 的高度为 185 像素,文字大小为 50 像素(文字大小近似为高度),所以 y设置为不小于 185+50=235,通过 调整 ,我们认为245效果合适。
文字 属性与 相比,大部分属性一样。区别在于没有使用滤镜(无 filter 属性),且文字为白色(属性 fill="white")。

在最终验证效果时,建议通过增减文本长度( SVG 标签的内容)如将@张三替换成@张三是个善良的人,确认效果是否仍然满足要求。使用时,对于不同的用户 ID,只需替换 SVG 标签的内容即可。

步骤2:创建 SVG 水印模板

https://vod.tencentcloudapi.com/?Action=CreateWatermarkTemplate&Type=svg&Name=测试&CoordinateOrigin=TopRight&XPos=2%&YPos=5%&SvgTemplate.Width=30S%&SvgTemplate.Height=0px&

参数说明:

参数 说明
Type=svg 创建水印模板类型为 SVG。
Name=测试 模板名称,非必填参数。
CoordinateOrigin=TopRight 水印置于视频右上角。
XPos=2% 水印原点 距离视频右边框偏移大小为视频宽度的 2%。
YPos=5% 水印原点 距离视频上边框偏移大小为视频高度的 5%。
SvgTemplate.Width=30S% 水印宽度为视频短边的 30%。
SvgTemplate.Height=0px 水印高度按原图等比例缩放。

假设创建后得到 SVG 水印模板 ID 为 12345。

步骤3:添加 SVG 视频水印

发起视频处理:

https://vod.tencentcloudapi.com/?Action=ProcessMedia&FileId=5285485487985271487&MediaProcessTask.TranscodeTaskSet.0.Definition=30&MediaProcessTask.TranscodeTaskSet.0.WatermarkSet.0.Definition=12345&MediaProcessTask.TranscodeTaskSet.0.WatermarkSet.0.SvgContent={步骤1 的 XML}&

视频加水印效果



附录

支持的字体列表

SimHei,黑体:style=RegularRoboto:style=Bold如有其他字体需求,请联系 技术支持。

对音视频的解决方案有疑惑?想了解解决方案收费? 联系解决方案专家

腾讯云限时活动1折起,即将结束: 马上收藏

同尘科技为腾讯云授权服务中心,购买腾讯云享受折上折,更有现金返利:同意关联,立享优惠

阿里云解决方案也看看?: 点击对比阿里云的解决方案

- 0人点赞 -

发表点评 (0条)

not found

暂无评论,你要说点什么吗?