HTML5+JS实现视频播放器水印叠加：全屏兼容与DOM操作详解

脚本专家

在网页视频中嵌入自定义文本水印是保护版权的常见需求。本文介绍一种基于HTML5原生video标签、通过JavaScript动态控制DOM实现水印叠加的方案，支持全屏模式，兼容IE8及以上浏览器。

实现原理
在video容器外层包裹一个相对定位的父元素，将水印层（如div）通过绝对定位覆盖在视频上方，设置pointer-events: none让鼠标事件穿透水印层，不影响视频控制。全屏时，通过监听fullscreenchange事件动态调整水印的尺寸和位置，确保水印始终显示。

HTML结构

2. <div id="videoContainer" style="position:relative; width:640px; height:360px;">
3.   <video id="myVideo" src="example.mp4" controls width="100%" height="100%"></video>
4.   <div id="watermark" style="position:absolute; top:20px; left:20px; color:white; font-size:24px; text-shadow:1px 1px 2px black; opacity:0.7; pointer-events:none; z-index:10;">
5.     版权所有
6.   </div>
7. </div>

复制代码

JS脚本：动态生成水印与全屏适配

2. function initWatermark() {
3.   var container = document.getElementById('videoContainer');
4.   var video = document.getElementById('myVideo');
5.   var watermark = document.getElementById('watermark');
6.   
7.   // 若水印元素不存在则动态创建
8.   if (!watermark) {
9.     watermark = document.createElement('div');
10.     watermark.id = 'watermark';
11.     watermark.style.cssText = 'position:absolute; top:20px; left:20px; color:white; font-size:24px; text-shadow:1px 1px 2px black; opacity:0.7; pointer-events:none; z-index:10;';
12.     watermark.textContent = '版权所有';
13.     container.appendChild(watermark);
14.   }
15.   
16.   // 全屏切换事件处理
17.   document.addEventListener('fullscreenchange', onFullscreenChange);
18.   document.addEventListener('mozfullscreenchange', onFullscreenChange);
19.   document.addEventListener('webkitfullscreenchange', onFullscreenChange);
20.   document.addEventListener('MSFullscreenChange', onFullscreenChange);
21.   
22.   function onFullscreenChange() {
23.     if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
24.       // 全屏时，容器宽高为屏幕尺寸，水印位置需重新计算（这里保持左上角固定偏移）
25.       // 也可以根据视频实际显示尺寸等比调整水印大小
26.     } else {
27.       // 退出全屏后恢复原尺寸
28.     }
29.   }
30. }
32. // 页面加载后初始化
33. window.addEventListener('load', initWatermark);

复制代码

关键参数说明
- pointer-events:none：让水印不拦截鼠标事件，保证视频控制条可正常操作。
- z-index:10：确保水印在video上方（video默认z-index为0或auto）。
- fullscreenchange事件：监听四种前缀，覆盖不同浏览器（Chrome、Firefox、Safari、IE11+）。
- 兼容性降级：IE8不支持addEventListener，可改用attachEvent。若需支持IE8，需调整事件绑定方式并确保CSS属性兼容。

优化建议
- 水印内容可通过js动态设置，如从后端获取用户ID或时间戳。
- 水印旋转（如45度倾斜）可增加防篡改效果，使用CSS transform:rotate(-45deg)。
- 多个水印交叉排列可提高覆盖面积，循环创建多个绝对定位的元素即可。
- 若视频源为流媒体（HLS/MPEG-DASH），水印逻辑不变，仅需替换video的src属性。

适用场景
- 在线教育平台防止录屏搬运。
- 直播回放页面版权声明。
- 内部培训视频水印标注归属。

该方案无需第三方库，纯前端实现，代码量小，易于集成。开发者可根据实际需求调整水印样式与显示逻辑。

热心网友5

感谢分享！这篇文章把视频水印的实现思路讲得很清楚，尤其是全屏兼容性那一块，考虑到四种前缀的 fullscreenchange 事件，细节很到位。pointer-events: none 的用法确实让水印既显示又不干扰操作，在实际项目中很实用。想问下，如果想让水印在全屏时自动按比例缩放（比如根据视频实际显示区域等比调整字号），你推荐是在 onFullscreenChange 里动态修改 style，还是直接用 CSS 的 vw/vh 单位更省事？