App前端怎么给video视频播放增加文字水印？

Question

App前端怎么给video视频播放增加文字水印，全屏不遮挡，兼容ios和安卓

网上都找了，没有找到解决方法。

Answer 1

先说结论实现不了

那么除了纯前端，还有什么方案？

1. 后端转码直接打水印
2. cdn 也能打水印
3. 原生接管视频播放能力，通过层级控制等方法处理。这里面又分几种细节方案，比如说 jsbridge 的，比如说直播用到的一些混合图层的方案。

Answer 2

------------------------------------------------可供参考-----------------------------------------------
H5，Dplayer视频播放器，需求：
utils/watermark.js

/**  水印添加方法  */

let setWatermark = (str1, str2, container, fullscreen, isPortrait) => {
  let page = document.getElementById('dplayer');
  let id = '1.23452384164.123412415';
  if (container === undefined) {
    return;
  }
  if (document.getElementById(id) !== null) {
    page.removeChild(document.getElementById(id));
  }
  // fullscreen 横屏时
  // isPortrait 竖屏时
  // 设置局部水印
  var containerWidth = fullscreen || isPortrait ? document.body.offsetWidth : container.offsetWidth; // 获取父容器宽
  var containerHeight =
    fullscreen || isPortrait ? document.body.offsetHeight : container.offsetHeight; // 获取父容器高
  container.style.position = 'relative'; // 设置布局为相对布局
  let topMin = 0;
  let topMax = containerHeight - 92;
  // 竖屏时
  if (isPortrait) {
    topMin = containerHeight / 2 - 123;
    topMax = containerHeight / 2 + 123 - 92;
  }

  var top = Math.random() * (topMax - topMin) + topMin;
  let leftMin=0;
  let leftMax = containerWidth - 127;
  // let leftMin = leftMax*0.5+50;

  // 非竖屏或非横屏时且拉大可视窗口
  if ((!fullscreen || !isPortrait) && uni.getWindowInfo().windowWidth > containerWidth) {
    leftMin = (uni.getWindowInfo().windowWidth - containerWidth) / 2;
    leftMax = containerWidth + leftMin - 127;
  }
  var left = Math.random() * (leftMax - leftMin) + leftMin;

  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) / 190); // 水印旋转角度
  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, 0, can.height / 4); // 水印在画布的位置x，y轴
  cans.fillText(str2, 0, can.height - 42);

  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 = '127px';
  // 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, isPortrait) => {
  let id = setWatermark(str1, str2, container, fullscreen, isPortrait);
  if (document.getElementById(id) === null) {
    id = setWatermark(str1, str2, container, fullscreen, isPortrait);
  }
};

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

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

template:

 <view
    class="video"
    id="directrecordwp"
  >
    <view id="dplayer"></view>
  </view>

当视频播放时：

 const vm=this;
//监听竖屏开启
vm.videoDp.on('webfullscreen', function () {
  vm.isPortrait = true;
});
//监听竖屏关闭
vm.videoDp.on('webfullscreen_cancel', function () {
  vm.isPortrait = false;
});
//监听横屏开启
vm.videoDp.on('fullscreen', function () {
  vm.fullscreen = true;
});
//监听横屏关闭
vm.videoDp.on('fullscreen_cancel', function () {
  vm.fullscreen = false;
});
let page = document.getElementById('directrecordwp');
//监听窗口尺寸变化事件
uni.onWindowResize((res) => {
   //电脑端查看h5时拉大视窗
  if (res.size.windowWidth > page.offsetWidth) {
    removeWatermark();
  }
});
       //水印
vm.WaterMark = setInterval(() => {
  //水印内容:userId:xx,当前时间
  setWaterMark(
    `userId:${vm.userInfo?.userId}`,
    formatTime(new Date()),
    page,
    vm.fullscreen,//判断是否视频为横屏时
    vm.isPortrait //是否为竖屏
  );
  setTimeout(() => {
    removeWatermark();
  }, 3000); //每次水印维持3秒后去除
}, 120000); //2分钟：120000

beforeDestroy() {
  //移除水印定时器
   removeWatermark();
 },