H5Player
FAQ
FAQ
简体中文

快速接入

1. 全局配置

1.1. playerjs.config

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

使用方法

playerjs.config = { ...customConfig };

1.1.1. 基础配置项

名称 类型 默认值 是否必填项 描述
ip String 是 s17 媒体服务 IP
port Number 是 s17 媒体服务端口
httpProtocol String 是 http 协议类型：http, https
baseURL String 是 自定义请求前缀，至少包含协议，ip，端口，如：https://test-2100.streamax.com:20551/getway， 当配置此项时，忽略前面的 ip，port, httpProtocol 等配置**（推荐使用该字段）**
decoderType String 1 否 解码类型，0: wasm，1: mse, 2: webCodecs(1.5 新增)。（如果浏览器不支持 h265 视频，会强制使用 wasm）1.4.0以上版本 设置该参数时类型使用Number
mediaProtocol String 否 视频拉流协议：'HTTP_FLV' , 'WS_FLV'，不配置或配置为空，sdk 内将会自动配置（优先'WS_FLV'）
seekTimeout number 60 否 1. seek 超时时长，单位：秒。回放时，用于检测 seek 是否超时； 2. loading 超时时长，单位：秒。直通和回放时，用于检测 loading 是否超时。
logLevel Number 3 否 日志等级，0-4，由低到高，依次 trace、debug、info、error、off

1.1.2. AI 马赛克能力展示

描述

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

配置项

名称 类型 默认值 是否必填项 描述
mosaic Number 0 否 是否打马赛克：0-不打码，1-插件打码，2-前端打码。推荐统一设置为 1
mosaicType Number 0 否 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 报警信息提取（1.3.10-P7 新增）
bucket Boolean false 否 是否开启 矿山挖斗信息展示（1.3.10-P7 新增）

示例

playerjs.config = { adas：true, dms: true };

1.1.4. 无视频占位

描述

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

配置项

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

示例

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

//获取自定义占位图
historyplayer.hooks.playerStatusToggle.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. 直通断线重连

描述

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

配置项

名称 类型 默认值 是否必填项 描述
reconnection object 重连间隔：20（0~20）重连次数不限（Infinity） 否 直通断线重连配置；关闭自动重连：0 或 false 或 timeInterval: 0 或 maxRetries: 0；重连次数 maxRetries：0,1,2,3...Infinity

示例

playerjs.config = {
    reconnection: {
        timeInterval: 3,
        maxRetries: 10
    }
};

1.1.6. 屏占比

描述

允许用户自定义视频画面屏占比

配置项

名称 类型 默认值 是否必填项 描述
aspectRatio String 铺满 否 播放屏占比，full: 铺满、origin: 原始比例、比例模式，如：16:9, 4:3, 1:1

示例

playerjs.config = {
    aspectRatio: '16:9'
};

1.1.7. 进度条回调

描述

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

配置项

名称 类型 默认值 是否必填项 描述
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 4 否 起播缓冲时长, 单位 秒。首帧或者通道卡顿后缓冲量达到该值后，才结束缓冲。建议设置大于 0 秒

示例

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

1.2. Header 配置

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

使用方法

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

基础配置项

名称 类型 默认值 是否必填 描述
_tenantId Number 2 否 租户 Id, 选填参数（S17 云服务时必填）
_appId Number 1 否 应用 Id, 选填参数（S17 云服务时必填）
_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();
}
目录