H5Player
FAQ
FAQ
简体中文

快速接入

1. 全局配置

1.1. playerjs.config

包含了对 s17 服务器的配置和播放器的配置，对所有 H5Player 创建的 player 实例生效。实例化之前必须对该配置项进行配置

使用方法

playerjs.config = { ...customConfig };

1.1.1. 基础配置项

名称 类型 默认值 是否必填项 描述
baseURL String 是 自定义请求前缀，至少包含协议，ip，端口，如：https://test-2100.xxxx.com:20551/getway
decoderType Number 2 否 解码类型，0: wasm, 1: mse, 2: webCodecs。如浏览器不支持该方式解码播放自动降级
operationTimeout Number 60 否 操作超时时长，单位：秒。1. 回放时，用于检测 seek 是否超时； 2. loading 超时时长，单位：秒。直通和回放时，用于检测 loading 是否超时。
logLevel Number 6 否 日志等级，0-4，由低到高，分别表示 0-trace,1-debug,2-info,3-warn,4-error,5-fatal,6-off（不打印任何日志）
hardwareAcceleration Number 0 否 webcodecs 是否启用硬件解码。0-浏览器自动选择，1-硬件解码，2-软件解码。仅在 decoderType = 2 时生效。如果直通需要更高的实时性，将该配置项设置为 2, 不过会损失掉一些性能。
fullRatio Number 0 否 画面比例铺满时，拉伸比的阈值，低于该值则不拉伸，按原始比例显示。取值 0-1。(V2.0.3)

1.1.2. AI 马赛克能力展示

描述

当视频中带有马赛克信息，并且需要显示时。可遮挡一些关键画面，比如人脸等。

配置项

名称 类型 默认值 是否必填项 描述
mosaic Number 0 否 是否打马赛克：0-不打码，1-插件打码(wasm 解码有效)，2-前端打码。
mosaicType Number 1 否 0: 模糊效果；1: 马赛克

示例

playerjs.config = {
    mosaic: 2, // 前端打码
    mosaicType: 1 // 马赛克效果，0：模糊，1：马赛克
};

1.1.3. AI 信息展示

描述

adas 叠加信息展示，包括车道线，报警标识，车辆标识，行人标识，当前速度，前车车距信息等。

dms 叠加信息展示，包括司机打电话，司机分心驾驶，未系安全带报警标识展示。

aeb 信息获取，主要包含前向碰撞等信息，用于叠加 OSD

bucket 信息展示，主要展示挖机挖斗中斗齿位置，用于判断是否斗齿缺失

配置项

名称 类型 默认值 是否必填项 描述
adas Boolean false 否 是否开启 adas 信息展示
dms Boolean false 否 是否开启 报警 dms 信息展示
aeb Boolean false 否 是否开启 需要 aeb 报警信息
bucket Boolean false 否 是否开启 矿山挖斗信息展示
allowAlarms number[] | undefined undefined 否 报警 id 列表。开启 adas 或 dms 后，允许展示的报警类型。如果所有报警都不需要展示，传 []。报警类型参考如下。
langs object[] undefined 否 词条配置，详见词条配置表格。
showCurves string[] undefined 否 需要展示的曲线列表。可选 distance: 前车距离曲线，speed: 速度曲线, ttc: 报警时长曲线。如果所有取消都不展示，传 []。
aiUnit object undefined 否 ai 展示单位。速度(默认 km/h), 距离(默认 m)。可选择配置参考单位表格。

报警列表

报警类型 id 描述
0 驾驶员异常报警
1 未系安全带报警
2 左右分心报警
3 下瞟分心报警
4 打电话报警
5 抽烟报警
6 打哈欠报警
7 遮挡报警
8 疲劳报警
9 红外阻断眼镜报警
10 前向碰撞报警
11 车距过近报警
12 车道偏离报警(左偏离)
13 车道偏离报警(右偏离)

词条配置

key 默认值 说明
IMPENDING COLLISION IMPENDING COLLISION 碰撞
VEHICLE TOO CLOSE VEHICLE TOO CLOSE 车距过近
LANE DEPARTURE LANE DEPARTURE 车道偏离
Small Small 小
people people 人
Large Large 大
SEATBELT SEATBELT 未系安全带
DISTRACTION DISTRACTION 分心驾驶
PHONE PHONE 打电话
phone phone 电话
SMOKING SMOKING 抽烟
YAWNING YAWNING 打哈欠
FATIGUE FATIGUE 疲劳

距离单位

Key 说明
1 米 (m)。默认
2 英尺 (ft)

速度单位

Key 说明
1 千米/小时 (km/h)。默认
2 英里/小时 (mph)

​

示例

playerjs.config = { adas：true, dms: true, allowAlarms: [8,10], // 只允许展示疲劳和碰撞报警 langs: [{ key: "VEHICLE TOO CLOSE", value: "VEHICLE TOO CLOSE" }], showCurves: ['distance', 'ttc'], // 只显示距离和ttc 曲线 aiUnit: { distance: 2, // 英尺 speed: 2, // mph } };

1.1.4. 无视频占位

描述

占位插件能帮助回放播放过程时，通道在无流播放状态能使用自定义占位图或文字等实现视频占位提示

配置项

名称 类型 默认值 是否必填项 描述
placeholder Boolean 否 是否开启 无视频占位遮罩

示例

// 开启占位插件
playerjs.config = {
    placeholder: true
};

//获取自定义占位图
historyplayer.hooks.onVideoPlaceholder.tap('auto play', (status) => {
    console.error('playerStatusToggle', status, status[0]);
    status.forEach(({ status, next }) => {
        const dom = document.createElement('div');
        dom.style.cssText = 'width:100%; height:100%; background-color:red;';
        dom.style.backgroundImage = `url(https://img2.baidu.com/it/u=263214107,966825174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500)`;
        // 通过next传入自定义占位DOM
        next(dom);
    });
});

1.1.5. 断线重连

描述

当设备由于网络波动情况下，出现异常断连时，可以通过该配置触发自动重连。

仅支持直通

配置项

名称 类型 默认值 是否必填项 描述
reconnectCount number 3 否 断线重连次数，默认 3 次，如需关闭请传 0
reconnectTime number 10 否 断线重连间隔，默认 10s
reconnectAgainCount number 0 否 再次重连的次数，默认 0。用于上面 reconnectCount 耗尽后再次启用重连。
reconnectAgainTime number 0 否 再次重连的间隔，默认 0，单位秒。用于上面 reconnectCount 耗尽后再次启用重连。

示例

playerjs.config = {
    reconnectCount: 3,
    reconnectTime: 10,
    reconnectAgainCount: 5,
    reconnectAgainTime: 20
};

1.1.6. 进度条回调

描述

在播放回放情况下，播放进度回传时间间隔以及格式允许设置

配置项

名称 类型 默认值 是否必填项 描述
timeHookInterval Number 500 否 回放时间回调 onTimeChange hook 的推送频率, 单位 ms, >= 40ms
timeFormatter String YYYY-MM-DD HH:mm:ss 否 时间回调 Hook 的时间格式

示例

playerjs.config = {
    timeHookInterval: 200，
    timeFormatter：‘YYYY-MM-DD HH:mm:ss’
};

1.1.8. 回放起播缓存功能

描述

在网络较差情况下，用户希望缓存一段时间后才开始播放，这样能够保证播放流畅

配置项

名称 类型 默认值 是否必填项 描述
needStartBuffer Boolean false 否 是否需要首帧缓冲，用于回放很短的证据或者 网络不太好的情况
bufferTime Number 0 否 起播缓冲时长, 单位 秒。首帧或者通道卡顿后缓冲量达到该值后，才结束缓冲。当设置为 0 时，关闭此功能，这意味着缓冲后，收到数据将立即播放

示例

playerjs.config = {
    needStartBuffer: true，
    bufferTime：1
};

1.1.9. Seek 重连等待间隔

描述

GB28181、标准 JT1078 等设备无 RTC 绝对时间，需要采用重连方式，那么关闭后到打开之间的等待间隔支持可配置

配置项

名称 类型 默认值 是否必填项 描述
seekRecWaitTime Number 500 否 等待间隔，单位 ms 
playerjs.config = {
    seekRecWaitTime: 500
};

1.2. Header 配置

playerjs.defaultHeaders 配置项。当媒体服务需要鉴权的时候，该配置项必须配置，具体参数视媒体服务接口而定。

使用方法

playerjs.defaultHeaders = {
 _token: 'token'
};

基础配置项

名称 类型 默认值 是否必填 描述
_tenantId Number 2 否 租户 Id, 选填参数
_appId Number 1 否 应用 Id, 选填参数
_token String 否 token
_sign String 否 sign

除此以外允许携带自定义请求头

2. 版本管理器

2.1. 介绍

H5Player 配套版本加载器，用于异步加载、快速切换 sdk，避免 sdk 版本冲突。它是个压缩的 js，可作为项目静态资源或存储于服务器中，加载获取。版本加载器在项目运行加载成功后，会在全局 window 中添加 videoSDKVM 的对象。后续所有 H5Player 的加载，切换等都需要通道该对象实现

注：内部项目建议使用该管理器进行加载 H5Player

2.2. videoSDKVM

属性

  • baseUrl：对于需要从服务端获取的，配置基础的 js 访问路径，有利于后续加载时的语法简写
  • build_time：版本加载器编译打包时间
  • currentVersion：获取当前加载好的 sdk 全局对象

方法

  • use
const loadSDKPromise = videoSDKVM.use([url|version]);

在未配置baseUrl时，使用use需要填写放在服务端sdk的js静态资源地址（js静态资源地址需要于项目URL同源）
配置baseUrl后，允许使用直接填写存放在服务端的sdk后缀版本号

加载时机

建议进入视频播放页面时预加载

示例

//配置baseUrl
videoSDKVM.baseUrl = 'http://192.168.132.72:23000/V1.3.9/';
// 加载sdk（sdkjs体积稍微较大，可等待页面加载完成后，或者加载过程中进行懒加载，具体可以自定义实现）
// 加载方式1：配置了baseUrl可选择方式
const loadSDKPromise = videoSDKVM.use('1.3.9.4be8e803f8942cbf37a8') // 填写sdk的文件名即可，不需要关注sdk文件名的组成
// 加载方式2：无限制
const loadSDKPromise = videoSDKVM.use('sdk 版本地址，如：http://192.168.132.72:23000/V1.3.9/1.3.9.4be8e803f8942cbf37a8.js')


// 在进入播放页面后，按照功能需求，提前对sdk播放进行初始化，不建议用户真正需要点击播放时去初始化
// 创建实例方式1:
loadSDKPromise.then((playerjs)=>{
    // 需要创建直通
    const livePlayer = playerjs.createLivePlayer(dom, {...});
})

// 创建实例方式2:
// 在使用use完成sdk加载后，会在全局window中挂在playerjs对象，可通过该对象创建
try {
    const livePlayer = playerjs.createLivePlayer(dom, {...});
} catch (e){
    // 可以循环window.playerjs 是否存在再重新加载一次
    loopCheckPlayJS();
    // 或者直接使用
    const playerjs = await loadSDKPromise();
}
目录