广告遮挡层
使用 JSON 配置文件来创建遮挡层,遮挡视频中的广告或其他不需要显示的内容
通过配置文件,您可以在不同的视频中动态地添加不同位置和大小的遮挡层。
配置文件结构
配置文件是一个 JSON 数组,每个数组元素是一个 JSON 对象,表示一个遮挡层。以下是每个字段的说明:
解释 width: 遮挡层的宽度,可以是具体的像素值(如 "200")或 "MATCH_PARENT" 表示匹配父容器的宽度。
height: 遮挡层的高度,可以是具体的像素值(如 "200")或 "MATCH_PARENT" 表示匹配父容器的高度。
gravity: 遮挡层的位置,可以是一个或多个值的数组。支持的值如下:
"1": Gravity.TOP - 遮挡层位于顶部。
"2": Gravity.BOTTOM - 遮挡层位于底部。
"3": Gravity.LEFT - 遮挡层位于左侧。
"4": Gravity.CENTER_HORIZONTAL - 遮挡层水平居中
"5": Gravity.RIGHT - 遮挡层位于右侧。。
"16": Gravity.CENTER_VERTICAL - 遮挡层垂直居中。
"17": Gravity.CENTER - 遮挡层同时水平和垂直居中。
top: 遮挡层距离顶部的边距,单位为像素(如 "10")。
left: 遮挡层距离左侧的边距,单位为像素(如 "10")。
right: 遮挡层距离右侧的边距,单位为像素(如 "10")。
bottom: 遮挡层距离底部的边距,单位为像素(如 "10")。
colour: 遮挡层的背景颜色,使用十六进制颜色值(如 "#ffffff" 表示白色)。
flag: 遮挡层的标识,用于区分不同的视频(如 "ldm3u8"),可以理解为指定线路创建某个位置的遮挡层示例配置一
解释 [
{
"width": "200",
"height": "200",
"gravity": ["1", "3"],
"top": "10",
"left": "10",
"right": "10",
"bottom": "10",
"colour": "#FF0000",
"flag": "ldm3u8"
},
{
"width": "200",
"height": "200",
"gravity": ["1", "5"],
"top": "10",
"left": "10",
"right": "10",
"bottom": "10",
"colour": "#00FF00",
"flag": "ldm3u8"
},
{
"width": "200",
"height": "200",
"gravity": ["2", "3"],
"top": "10",
"left": "10",
"right": "10",
"bottom": "10",
"colour": "#FFC0CB",
"flag": "ldm3u8"
},
{
"width": "200",
"height": "200",
"gravity": ["2", "5"],
"top": "10",
"left": "10",
"right": "10",
"bottom": "10",
"colour": "#800080",
"flag": "ldm3u8"
},
{
"width": "MATCH_PARENT",
"height": "50",
"gravity": ["1"],
"top": "50",
"left": "10",
"right": "10",
"bottom": "10",
"colour": "#70DBDB",
"flag": "ldm3u8"
}
]示例效果
这只是一个示例,其中白色方块、白色横条的颜色、透明度、位置、数量都可以自定义。您还可以将colour设为远程图片链接
示例配置二
您可以添加图像作为广告或遮挡住不想看到的内容
[
{
"width": "200",
"height": "300",
"gravity": ["2", "5"],
"top": "0",
"left": "0",
"right": "30",
"bottom": "30",
"colour": "/uploads/20241021/f0483b2dfd959896c6c1e35830cd2ed5.png",
"flag": "蓝光"
}
]示例效果
如何使用配置文件
- 配置文件位于public/uploads/tvbox/canvas.json
- 编辑配置文件,没有的可以创建一个
- 根据需要添加或修改遮挡层的配置
- 重新播放相关视频查看效果,无需重启客户端
- flag 为 ALL 的时候应用到所有线路
常见问题
- 遮挡层没有显示:检查配置文件是否保存在正确位置,检查配置文件中的 flag 字段是否与播放器标志匹配
- 遮挡层位置不正确: 检查/修改 gravity 字段的值
- 遮挡层颜色不正确:检查 colour 字段的值是否为有效的十六进制颜色值