Logo settings

zwplayer supports overlaying custom Logos on the video screen, which can be configured through parameters to achieve flexible Logo display effects.

1. Configuration Methods

1.1 Simple Configuration (String Format)

Directly set the logo parameter to the URL address of the Logo image:

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

Default Display Effects:

  • Position: Upper right corner of the player (5% top margin, 5% right margin)

  • Size: 5% of player width

  • Opacity: 50% (semi-transparent effect)

1.2 Advanced Configuration (Object Format)

Detailed configuration via JavaScript object:

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

2. Logo Object Property Description

PropertyTypeDefaultRequiredDescription
iconstring YesLogo image URL, supports PNG, JPG, GIF, SVG formats. PNG or SVG images with transparent channels are recommended
dockstringrightNoLogo docking area, optional values: left (left side), right (right side)
x, ystring5%NoLogo position coordinates, relative to the player. When dock is left, relative to upper left corner; when right, relative to upper right corner. Supports pixel values (e.g., 60px) or percentages (e.g., 5%)
width, heightstring5%NoLogo dimensions, supports pixel values or percentages (relative to player dimensions)
opacitynumber50NoOpacity, range 0-100 (0: fully transparent, 100: fully opaque), recommended values: 30-70. This property allows the player logo to blend into the video画面

3. Usage Suggestions

  1. Image Production

    • Recommended to use larger source images (e.g., 256×256 pixels)

    • Prioritize PNG or SVG formats to ensure transparent background

  2. Size and Position

    • Recommended to use percentage values so the Logo can adapt to player scaling

    • Debug the position at the baseline size first, then apply relative dimensions. This way, when the player scales or goes fullscreen later, the logo can automatically scale its position and size for better coordination.

4. Complete Example

<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. Effect Display

Logo settings effect example

Illustration: Logo display effect in the upper right corner of the player

 

Catalog Navigation