ZWPlayer Logo 设置说明

zwplayer 支持通过 logo 参数在视频画面上叠加静态品牌 Logo，适合简单的品牌标识场景。

如需更强大的水印功能（图片水印、文字水印、动态防录屏水印、铺满水印、模板变量等），请参见水印设置。

1. 简单配置（字符串格式）

直接将 logo 参数设置为 Logo 图片的 URL 地址：

log: 'http://example.com/vod/logo.png'

默认显示效果：

位置：播放器右上角（上边距 5%，右边距 5%）
尺寸：播放器宽度的 5%
透明度：50%（半透明效果）

2. 高级配置（对象格式）

通过 JavaScript 对象进行详细配置：

logo: {
    icon: 'http://example.com/vod/logo.png',
    dock: 'left',
    x: '5%',
    y: '5%',
    width: '20%',
    height: '20%',
    opacity: 70
}

3. Logo 对象属性说明

属性	类型	缺省值	必填	说明
`icon`	string		是	Logo 图片 URL，支持 PNG、JPG、GIF、SVG 格式，建议使用带透明通道的 PNG 或 SVG 图片
`dock`	string	right	否	Logo 停靠区域，可选值：`left`（左侧）、`right`（右侧）
`x`, `y`	string	5%	否	Logo 位置坐标，相对于播放器。支持像素值（如 `60px`）或百分比（如 `5%`）
`width`, `height`	string	5%	否	Logo 尺寸，支持像素值或百分比（相对于播放器尺寸）
`opacity`	number	50	否	透明度，取值范围 0-100（0：完全透明，100：完全不透明），推荐值：30-70

4. 完整示例

<script language="javascript">
   window.mainplayer = new ZWPlayer({
      url: 'http://example.com/vod/movie.mp4',
      playerElm: '#player-holder',
      controlbar: true,
      logo: {
         icon: 'http://example.com/vod/cctv-3-logo.png',
         dock: 'right',
         opacity: 70,
         x: '5%',
         y: '2%',
         width: '15%',
         height: '15%',
      }
   });
</script>

5. 效果展示

Logo 设置效果示例

图示：在播放器右上角显示的 Logo 水印效果

6. 进阶：水印设置

logo 参数适合简单的品牌标识场景。如果需要以下功能，建议使用 watermarks 参数：

文字水印：显示自定义文本
动态游走水印：防录屏保护
铺满水印：文字倾斜网格覆盖整个画面
模板变量：如 {user_id}、{sys_time} 等动态内容
多水印叠加：同时显示多个水印元素

详见水印设置使用说明。