logo设置

1. logo设置演示

2. 示例代码 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 对象属性说明

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

目录导航