超级会员免费看
经常能看到播放视频的网站上加水印的效果，记录下成果以备后续看：
效果图如下：
h5页面视频播放的同时加水印，有以下3种方法可尝试：
- 在原视频上添加，由于每次登陆的用户不一样，需要根据用户名动态确定水印的文本值。这并不现实；
- 捕捉视频的每一帧，重新画在画布上，并添加水印。效果不太理想。捕捉到的帧失真严重；
- 和视频同一个页面，在其上边加类似蒙版，完美解决。
最终用方案3完美解决，源码如下：
<!DOCTYPE html>
本文介绍了在H5页面中实现视频播放时加水印的方法，包括直接在视频上添加、通过捕帧重新绘制以及创建蒙版覆盖。最终采用在视频上方添加蒙版的方式，解决了全屏时水印消失的问题，通过重写controls实现完美显示。参考了相关技术文章来完成这一功能。
订阅专栏 解锁全文
扫一扫
3516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
