Logo Settings

1. Logo Configuration Demo

2. Example Code (Vue)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/v3/zwplayer/zwplayer.js"></script>
</head>
<body>
<div id="mse" style="width: 800px; height: 450px;  margin: 0 auto;"></div>
<script type="text/javascript">
    var info = {
        playerElm: 'mse',
        url: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4',
        infoButton: true,
        optionButton: true,
        snapshotButton: true,
        controlbar: true,
        autoplay: false,
        logo: {
            icon: 'https://cdn.zwplayer.cn/logo.png',
            dock: 'right',
            x: '3%',
            y: '3%',
            width: '20%',
            height: '20%',
            opacity: 50
        },
    };
    new ZWPlayer(info);
</script>

</body>
</html>

3. Logo Object Properties

Property	Type	Default Value	Required	Description
`icon`	string		Yes	Logo image URL. Supports PNG, JPG, GIF, and SVG formats. PNG or SVG with transparent background is recommended.
`dock`	string	right	No	Logo docking position. Optional values: `left` (left side), `right` (right side)
`x`, `y`	string	5%	No	Logo position coordinates, relative to the player. When `dock` is `left`, relative to the top-left corner; when `right`, relative to the top-right corner. Supports pixel values (e.g., `60px`) or percentages (e.g., `5%`)
`width`, `height`	string	5%	No	Logo dimensions. Supports pixel values or percentages (relative to player dimensions)
`opacity`	number	50	No	Opacity level, ranging from 0-100 (0: fully transparent, 100: fully opaque). Recommended: 30-70. This property allows the player logo to blend into the video content.

Catalog Navigation