本文共 747 字，大约阅读时间需要 2 分钟。

经常能看到播放视频的网站上加水印的效果，记录下成果以备后续看：

效果图如下：

1. 在原视频上添加，由于每次登陆的用户不一样，需要根据用户名动态确定水印的文本值。这并不现实；
2. 捕捉视频的每一帧，重新画在画布上，并添加水印。效果不太理想。捕捉到的帧失真严重；
3. 和视频同一个页面，在其上边加类似蒙版，完美解决。

最终用方案3完美解决，源码如下：

方案2也尝试了下： 读取视频帧每一帧添加水印后，然后画在画布上；视频有失真情况，对于19201080的失真很严重，这是原始960540的视频稍有失真，效果如下：

以上的俩种对于非全屏情况下都生效，全屏情况下video级别超高，水印会消失。解决办法：重写controls完美解决

可参考：

• https://blog.csdn.net/qq_22557797/article/details/72866358?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1
• https://www.jianshu.com/p/f71d1284eaf8