JavaScript实现网页视频添加水印的示例代码 JavaScript实现网页视频添加水印

示例图
原理
代码示例

示例图

文章图片

【JavaScript实现网页视频添加水印的示例代码】

文章图片

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

代码示例 index.html

html5视频水印
文章图片
00:00:00/00:00:00
文章图片

核心代码

$(".span").html("water-mark");

"water-mark"字段添加要打的水印内容。也可以动态添加水印内容。
样式waterMarkVideo.css代码

body,div,img{margin: 0; padding: 0; border: 0; }#container{width: 640px; border: 1px solid pink; }.pos{width: 640px; height: 60px; background: rgba(0,0,0,0.5); margin-top: -63px; position: relative; }#playBtn{position:relative; top: 10px; left: 20px; cursor: pointer; }#progress{height: 12px; width: 100%; position: relative; top: -27px; cursor: pointer; }.timebox{position:absolute; top: 20px; right: 80px; cursor: pointer; color: white; }#full{position:absolute; top: 12px; right: 20px; cursor: pointer; }.video-watermark-item {left: 15%; top: 10%; font-size: 20px; color: rgba(240,240,240,0.3); font-family: 方正黑体; -o-transform: translate(-15%, -50%) rotate(-35deg); -webkit-transform: translate(-15%, -50%) rotate(-35deg); -moz-transform: translate(-15%, -50%) rotate(-35deg); -ms-transform: translate(-15%, -50%) rotate(-35deg); transform: translate(-15%, -50%) rotate(-35deg); position: absolute; overflow: hidden; }.noselect {display: inline-block; padding: 100px; }

以上就是JavaScript实现网页视频添加水印的示例代码的详细内容，更多关于JavaScript网页视频水印的资料请关注脚本之家其它相关文章！