播放器水印&跑马灯
跑马灯主要通过在播放器层级上增加开源字幕库实现。
获取播放器设置及水印设置信息
接口 API
public getPlayerConfig(webinarId: string, callback: VHPlayerConfigCallback)接口入参
| 参数名称 | 是否必须 | 示例 | 备注 |
|---|---|---|---|
| webinarId | 是 | xxx | 活动id |
| callback | 是 | xxx | VHPlayerConfigCallback 类型回调 |
接口使用示例
VHSaaSDK.getInstance().getPlayerConfig(id, {
onSucceed: (data: VHPlayerConfig) => {
if (callback) {
callback.onSucceed(data);
}
},
onFailure: (errorCode, errorMsg) => {
if (callback) {
callback.onFailure(errorCode, errorMsg);
}
}
});VHPlayerConfigCallback 响应数据
| 播放器聚合参数VHPlayerConfig | 类型 | 描述 |
|---|---|---|
| water | VHWatermarkConfig | 水印(播放器、文档) |
| marquee | VHMarqueeConfig | 跑马灯 |
| basic | VHBasicConfig | 播放器基础配置 |
| default_definition | VHPlayDefinition | 默认清晰度 |
播放器基础配置VHBasicConfig
播放器设置基础配置信息。
| VHBasicConfig | 类型 | 描述 |
|---|---|---|
| webinar_id | number | 活动ID（数字类型） |
| barrage_button | number | 弹幕按钮是否显示 (0:关闭)(1:开启)默认开启 |
| barrage_show_nickname | number | 弹幕显示昵称（1-显示，0-隐藏，数字类型） |
| progress_bar | number | 进度条(0:关闭)(1:开启)默认开启 |
| speed | number | 倍速(0:关闭)(1:开启)默认为1 |
| autoplay | number | 自动播放（1-开启，0-关闭，数字类型） |
| picture_in_picture | number | 画中画(0:关闭)(1:开启)默认为1 |
| record_audio | number | 回放及点播状态是否显示音频入口：1.是，0.否 |
| barrage_style | number | 弹幕样式开关：1.开启，0.关闭 |
| show_full_screen_entry | number | 是否显示全屏开关：1.开启，0.关闭 |
播放器水印VHWatermarkConfig
播放器和文档水印
| VHWatermarkConfig | 类型 | 描述 |
|---|---|---|
| webinar_id | number | 活动ID（数字类型） |
| watermark_open | number | 图片水印是否开启（1-开启，0-关闭） |
| text_watermark_open | number | 文字水印是否开启（1-开启，0-关闭） |
| img_url | string | 水印图片URL |
| img_alpha | number | 图片水印透明度（0-100） |
| img_position | number | 图片水印位置 1左上角 2右上角 3左下角 4右下角 |
| img_size | number | 水印图片大小，1 大，2 中，3 小 |
| doc_watermark_open | number | 文档水印是否开启（1-开启，0-关闭） |
| doc_watermark_type | VHDocWatermarkType | 文档水印类型配置 |
| text_watermark | VHTextWatermarkType | 文字水印类型 |
| doc_font_size | number | 文档水印字体大小 |
| doc_font_color | string | 文档水印字体颜色 "#000000" |
| doc_transparency | number | 文档水印透明度（0-100） |
跑马灯VHMarqueeConfig
| VHMarqueeConfig | 类型 | 描述 |
|---|---|---|
| webinar_id | number | 活动ID（数字类 型） |
| scrolling_open | number | 是否开启跑马灯（1-开启，0-关闭） |
| text_type | number | 文本显示格式（1=固定文本 |
| text | string | 滚动文本内容 |
| alpha | number | 不透明度（0-100） |
| size | number | 文本大小 |
| color | string | 十六进制色值 文本颜色 #FFFFFF |
| interval | number | 间隔时间ms |
| speed | number | 滚屏速度. 快：3000 中：6000 慢：10000 |
| position | number | 显示位置 随机:1、上:2、中:3、下:4 |
| scroll_type | number | 显示方式 1 滚动 2 闪烁 |
视频清晰度VHPlayDefinition
清晰度枚举值
| VHPlayDefinition | 值 | 描述 |
|---|---|---|
| VH_ORIGIN | 0 | 原画 |
| VH_UHD | 1 | 高清720p |
| VH_HD | 2 | 标清480p |
| VH_SD | 3 | 流畅360p |
| VH_AUDIO | 4 | 纯音频 |
| VH_FULL_HD | 6 | 超清1080p |
播放器水印代码示例
Demo 示例中VHPlayerWaterMark展示了播放器水印的使用方法。可进行参考实现
//判断图片水印和文字水印是否开启。如果开启则加载播放器水印组件
if (this.player_config?.water?.watermark_open || this.player_config?.water?.text_watermark_open) {
VHPlayerWaterMark({ water: this.player_config?.water, webinars: this.webinars })
.width('100%')
.height('100%')
.zIndex(playerZIndex.indexOf(PLAYER_MASK_INDEX))
}跑马灯代码示例
Demo 示例中VHMarqueeViews展示了跑马灯的使用方法。可进行参考实现
//跑马灯 判断是否开启了跑马灯。如果开启则加载
if (this.playerConfig?.marquee?.scrolling_open) {
VHMarqueeViews({ playerConfig: this.playerConfig, webinarInfo: this.webinars! })
.width('100%')
.height('100%')
.zIndex(playerZIndex.indexOf(MARQUEE))
}修改于 2025-11-20 03:00:05