HTML5+JS实现视频播放器水印叠加：全屏兼容与DOM操作详解
在网页视频中嵌入自定义文本水印是保护版权的常见需求。本文介绍一种基于HTML5原生video标签、通过JavaScript动态控制DOM实现水印叠加的方案，支持全屏模式，兼容IE8及以上浏览器。实现原理
在video容器外层包裹一个相对定位的父元素，将水印层（如div）通过绝对定位覆盖在视频上方，设置pointer-events: none让鼠标事件穿透水印层，不影响视频控制。全屏时，通过监听fullscreenchange事件动态调整水印的尺寸和位置，确保水印始终显示。
HTML结构
<div id="videoContainer" style="position:relative; width:640px; height:360px;">
<video id="myVideo" src="example.mp4" controls width="100%" height="100%"></video>
<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;">
版权所有
</div>
</div>
JS脚本：动态生成水印与全屏适配
function initWatermark() {
var container = document.getElementById('videoContainer');
var video = document.getElementById('myVideo');
var watermark = document.getElementById('watermark');
// 若水印元素不存在则动态创建
if (!watermark) {
watermark = document.createElement('div');
watermark.id = 'watermark';
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;';
watermark.textContent = '版权所有';
container.appendChild(watermark);
}
// 全屏切换事件处理
document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('mozfullscreenchange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);
document.addEventListener('MSFullscreenChange', onFullscreenChange);
function onFullscreenChange() {
if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
// 全屏时，容器宽高为屏幕尺寸，水印位置需重新计算（这里保持左上角固定偏移）
// 也可以根据视频实际显示尺寸等比调整水印大小
} else {
// 退出全屏后恢复原尺寸
}
}
}
// 页面加载后初始化
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属性。
适用场景
- 在线教育平台防止录屏搬运。
- 直播回放页面版权声明。
- 内部培训视频水印标注归属。
该方案无需第三方库，纯前端实现，代码量小，易于集成。开发者可根据实际需求调整水印样式与显示逻辑。
Re: HTML5+JS实现视频播放器水印叠加：全屏兼容与DOM操作详解
感谢分享！这篇文章把视频水印的实现思路讲得很清楚，尤其是全屏兼容性那一块，考虑到四种前缀的 fullscreenchange 事件，细节很到位。pointer-events: none 的用法确实让水印既显示又不干扰操作，在实际项目中很实用。想问下，如果想让水印在全屏时自动按比例缩放（比如根据视频实际显示区域等比调整字号），你推荐是在 onFullscreenChange 里动态修改 style，还是直接用 CSS 的 vw/vh 单位更省事？Re: HTML5+JS实现视频播放器水印叠加：全屏兼容与DOM操作详解
这个方案很实用，我之前做视频版权保护时也用了类似思路。`pointer-events: none` 这个属性确实关键，要不水印会挡住播放器的控制条。全屏兼容那段写得很详细，各种前缀都考虑到了，赞一个。请问在实际测试中，IE8下用 `attachEvent` 绑定 `fullscreenchange` 能正常工作吗？我记得IE8好像不支持全屏API，可能需要额外判断。另外，如果视频容器宽高比不是固定的，水印位置用百分比会不会比固定像素更灵活一些？Re: HTML5+JS实现视频播放器水印叠加：全屏兼容与DOM操作详解
这个方案思路清晰，代码也很简洁，直接基于原生 video 和 DOM 操作实现，几乎没有外部依赖，很适合快速集成。我特别赞同 `pointer-events: none` 的处理，这样水印不会干扰视频控制条，用户体验好。 有个小细节想确认一下：全屏时水印位置如果保持固定偏移，在屏幕比例和视频原始比例不一致时，会不会出现水印跑出视频显示区域的情况？比如视频被裁剪或留有黑边时，可能需要根据视频实际渲染区域动态计算水印坐标。另外，如果是多个水印交叉排列，性能上有没有需要注意的地方（比如大量 DOM 元素对滚动或缩放的影响）？ 整体非常实用，感谢分享，收藏了。
页:
[1]