demo-实现视频播放加水印（自定义v-watermk指令）

        通过 CSS、Canvas 或 SVG 绘制水印，将其以 absolute 或 fixed 的方式覆盖在页面上。可以动态调整位置、透明度和大小。

        有几个点需要考虑：

        •实时性：水印需要随着视频播放实时渲染，确保同步性。

        •性能要求：特别是在高分辨率视频中，水印的渲染可能对性能产生较大影响。

        •兼容性：需要兼容不同的播放器（如原生 video 标签或第三方播放器库）。

        •安全性：确保水印无法轻松被去除，比如通过屏幕录制等方式窃取无水印视频。

在main.js 引入wartermk.js （或者在想要添加的某个页面引入）。 

import Vue from 'vue';

//自定义v-watermk指令

//bind：只调用一次，指令第一次绑定到元素时调用
//inserted：被绑定的元素插入父节点时调用
//update：被绑定元素所在的模板更新时调用
//componentUpdated：被绑定元素所在模板完成一次更新周期时调用
//unbind：只调用一次，指令与元素解绑时调用
                    

Vue.directive('watermk', {
  bind: function (el, binding) {
    // 水印文字，父元素，画布宽度，画布高度，字体，文字颜色，画布横坐标
    function addWatermk(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) {
        const can = document.createElement('canvas');
        parentNode.appendChild(can);
        can.width = width || 100;
        can.height = height || 60;
        can.style.display = 'none';
        const 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 定位覆盖（某个元素，如图片添加水印建议使用此方法）
        const 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) {
      addWatermk(binding.value.text, el, binding.value.width, binding.value.height, binding.value.font, binding.value.textColor, binding.value.fillTextX);
    }
  }
});

注意：水印需要跟video同级，否则没有效果

<div class="video_box" v-watermk="{ text: 'demo', textColor: 'red' }"></div>

<video :id="'player'" class="video"  ref="my_videos" preload="auto" playsinline webkit-playsinline></video>

全屏时水印消失问题：

视频全屏播放时，会把其他的元素都隐藏掉（css默认）。监听视频全屏时，拿到视频标签元素 和 水印标签元素，然后把 水印标签元素append到视频标签元素里面去就可以显示水印了。

//举例腾讯云sdk    --- 基本逻辑---
import TCPlayer from 'tcplayer.js';
import 'tcplayer.js/dist/tcplayer.min.css';



setVideo() {
      this.player = TCPlayer('player', {
        sources: [
          {
            src: ''
          }
        ],
        licenseUrl: '',
        licenseKey: ''
      });

      // 全屏添加水印
      this.player.on('fullscreenchange', () => {
        const videoDiv = document.getElementsByClassName('video')[0];
        videoDiv.appendChild(document.getElementsByClassName('video_box')[0]);
      });
    }