video.js添加水印

Video.js是一个流行的JavaScript库，用于创建交互式视频播放器。要在Video.js中添加水印，你需要利用其插件系统或者直接操作HTML5 video元素。以下是基本步骤：

1. **安装Video.js水印插件**:
- 如果还没有安装，可以使用npm（Node Package Manager）安装`videojs-contrib-watermark`插件：`npm install videojs-contrib-watermark`
- 或者在CDN上引入，如：`https://cdn.jsdelivr.net/npm/videojs-contrib-watermark@latest/dist/videojs_contrib_watermark.min.js`

2. **初始化Video.js并启用插件**:

   const player = videojs('my-video', {
     plugins: {
       watermark: {
         text: 'Your Watermark Text', // 水印的文字内容
         align: 'bottom-right', // 对齐位置，其他选项还有'center-bottom'等
         opacity: 0.5, // 透明度
         size: 'auto', // 自动调整大小，也可以设置具体的尺寸
         zIndex: 999 // 设置z-index避免遮挡其他元素
       }
     }
   });

3. **显示水印**:
初始化完成后，水印就会随着视频播放而自动显示。

4. **自定义水印样式**:
可以通过CSS进一步定制水印的颜色、字体、边框等样式。

.video-js .vjs-watermark {
  /* 添加自定义CSS规则 */
}