DPlayer视频如何增加水印？

Question

DPlayer视频水印

当前用的是DPlayer视频播放器，我们如何对视频增加水印，求解答

Answer 1

1、创建watermark.js文件，代码如下

/**  水印添加方法  */

let setWatermark = (str1, str2, container, fullscreen) => {
  let page = document.getElementById('dplayer');
  let id = '1.23452384164.123412415';
  if (container === undefined) {
    return;
  }
  if (document.getElementById(id) !== null) {
    page.removeChild(document.getElementById(id));
  }
  // 设置局部水印
  var containerWidth = fullscreen ? document.body.offsetWidth : container.offsetWidth; // 获取父容器宽
  var containerHeight = fullscreen ? document.body.offsetHeight : container.offsetHeight; // 获取父容器高
  container.style.position = 'relative'; // 设置布局为相对布局
  var top = Math.random() * (containerHeight - 92);
  var left = Math.random() * (containerWidth - 548);
  let can = document.createElement('canvas');
  // 设置canvas画布大小
  can.width = 294;
  // can.width = 334;
  can.height = 90;

  let cans = can.getContext('2d');
  cans.rotate((-20 * Math.PI) / 180); // 水印旋转角度
  cans.font = '15px Vedana';
  // cans.font = '20px Vedana';
  // cans.fillStyle = 'red';
  cans.fillStyle = '#ffc20e';
  // cans.textAlign = 'center';
  cans.border = '1px solid red';
  cans.textBaseline = 'Middle';
  cans.fillText(str1, can.width / 2, can.height); // 水印在画布的位置x，y轴
  cans.fillText(str2, can.width / 2, can.height + 22);

  let div = document.createElement('div');
  div.id = id;
  div.style.pointerEvents = 'none';
  div.style.top = top + 'px';
  div.style.left = left + 'px';
  div.style.opacity = '0.15';
  div.style.position = 'fixed';
  div.style.zIndex = '100000';
  div.style.width = '294px';
  // div.style.width = '394px';
  div.style.height = '90px';
  div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
  page.appendChild(div);
  // container.appendChild(div);
  return id;
};

// 添加水印方法
export const setWaterMark = (str1, str2, container, fullscreen) => {
  let id = setWatermark(str1, str2, container, fullscreen);
  if (document.getElementById(id) === null) {
    id = setWatermark(str1, str2, container, fullscreen);
  }
};

// 移除水印方法
export const removeWatermark = () => {
  let id = '1.23452384164.123412415';
  let page = document.getElementById('dplayer');

  if (document.getElementById(id) !== null) {
    page.removeChild(document.getElementById(id));
  }
};

2、引入watermark.js文件
import { removeWatermark, setWaterMark } from '../../utils/watermark';
3、在监听视频播放的时候设置水印

 this.videoDp.on('play', function () {
        if (vm.WaterMark) {
          clearInterval(vm.WaterMark);
        }
        //监听竖屏开启
        vm.videoDp.on('webfullscreen', function () {
          vm.fullscreen = true;
        });
        //监听竖屏关闭
        vm.videoDp.on('webfullscreen_cancel', function () {
          vm.fullscreen = false;
        });
        //监听横屏开启
        vm.videoDp.on('fullscreen', function () {
          vm.fullscreen = true;
        });
        //监听横屏关闭
        vm.videoDp.on('fullscreen_cancel', function () {
          vm.fullscreen = false;
        });
        //  水印
        vm.WaterMark = setInterval(() => {
         let page = document.getElementById('directrecordwp');
          setWaterMark(`userId:${vm.userInfo?.userId}`, formatTime(new Date()), page,vm.fullscreen);
          setTimeout(() => {
            removeWatermark();
          }, 3000); //每次水印维持3秒后去除
        }, 4000); //4秒显示一次
}）

4、注意销毁定时器和水印
(1)组件销毁前

 beforeDestroy() {
    removeWatermark();//销毁水印
    if (this.WaterMark) {
        clearInterval(this.WaterMark); //清除定时器
    }
}

(2)视频暂停时

this.videoDp.on('pause', function () {
        if (vm.WaterMark) {
          clearInterval(vm.WaterMark);
        }
      });

(3)在切换播放视频事件中

if (vm.WaterMark) {
        clearInterval(vm.WaterMark);
      }

Answer 2

用这些Adobe Premiere、Final Cut Pro、VLC 工具