免费网站制作 优帮云,珠海响应式网站建设公司,做棋牌网站,餐饮网站建设背景1.需求背景
其实腾讯云点播的api也支持视频水印#xff0c;但是只有单个水印#xff0c;大概效果是这样子的#xff0c;不满足我们的需求#xff0c;我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印#xff08;主要是防录屏,最后的实现效果是这样…1.需求背景
其实腾讯云点播的api也支持视频水印但是只有单个水印大概效果是这样子的不满足我们的需求我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印主要是防录屏,最后的实现效果是这样
2.实现
创建 warterMark.js
warterMark.js里面的代码
import Vue from vueVue.directive(watermark, {bind: function(el, binding){// 水印文字父元素画布宽度画布高度字体文字颜色画布横坐标function addWaterMarker(str, parentNode, width, height, font, textColor, fillTextX 10){ // 检查父元素是否包含子元素const elementContains (parent, child) parent ! child parent.contains(child);const flag elementContains(parentNode, document.querySelector(canvas));// 防止重复创建if (!flag) {let can document.createElement(canvas);parentNode.appendChild(can);can.width width || 200;can.height height || 140;can.style.display none;let cans can.getContext(2d);cans.rotate(-20 * Math.PI / 180);cans.font font || 13px Microsoft Yahei;cans.fillStyle textColor || #DDDDDD;cans.textAlign left;cans.textBaseline Middle;cans.fillText(str, fillTextX, can.height);// 设置背景图整个项目中都添加水印建议使用此方法// parentNode.style.backgroundImage url( can.toDataURL(image/png) );// 创建div 定位覆盖某个元素如图片添加水印建议使用此方法let div document.createElement(div);div.id str;div.style.pointerEvents none;div.style.top 0;div.style.left 0;div.style.position absolute;div.style.zIndex 100000;div.style.width 100%;div.style.height 100%;div.style.background url( can.toDataURL(image/png) );parentNode.appendChild(div);}}if (binding.value.text) {addWaterMarker(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX )}}
})main.js 引入warterMark.js 或者在想要添加的某个页面引入
import /utils/warterMark.js4.页面结构注意水印一定要跟video同级不要直接加到video上面去会没有用
5.加了水印后效果如下图但是会出现一个问题就是视频在点击全屏时水印会消失 全屏时水印消失
6.处理全屏视频时水印消失的问题
这段代码的意思主要是监听视频全屏时就去拿到视频标签元素 和 水印标签元素然后把 水印标签元素append到视频标签元素里面去就可以显示水印了。因为我这里用的是腾讯云sdk大家可以根据自己用的视频插件来写基本逻辑就在这里了 原因就是在视频全屏播放时会把其他的元素都隐藏掉css默认。所以很多做视频开发的开发者他们的全屏其实不是真正的全屏而是套了一个壳把外面的壳放大了。
// 用户全屏添加水印this.player.on(fullscreenchange, () {const video_div document.getElementsByClassName(course_video)[0]video_div.appendChild(document.getElementsByClassName(my_course_video_box)[0])})3.补充(水印指令的用法)
如果只想作用于一个盒子时出现了这个情况那么你需要给水印盒子添加一个position: relative;属性 盒子css添加position: relative;属性 .fanwai{width: 800px;height: 150px;border: 1px solid rebeccapurple;margin-top: 20px;position: relative;}效果
4.缺点
该水印指令生成的水印 可以通过删除dom元素(如果你的水印是在一个单独的dom的话如果你是作用在body上就不会因为你把body删了里面的内容也没了)就把水印删了只能说防普通用户防君子。可以找下其他的水印插件看看。 但是视频全屏时添加水印的逻辑是不变的。
5.demo地址
https://github.com/rui-rui-an/watermark 如果demo运行起来视频不可用可能是云点播的license过期了大家可以自己去申请一个填到项目里。 云点播地址https://cloud.tencent.com/document/product/266/58772 填到这里就可以了
6.参考链接
vue 指令实现水印效果掘金https://juejin.cn/post/6966985241286148126
