H5Player
FAQ
FAQ
简体中文

视频其他功能接入

1. 功能支持情况

插件 直通 回放
电子放大镜 √ √
全屏 √ √
截图 √ √
手动马赛克 √ √
视频信息 √ √
直通延迟监测 √ -
逐帧播放 - √

2. 功能接入指南

所有的功能都挂载在 player.pluginMap 上。回放播放的插件也都统一挂载到了外层播放器 historyPlayer.pluginMap 上，不需要在通道播放器调用方法。和直通不同的是，回放调用某个通道的方法时，需要在方法传入额外的参数 channelIndex（通道索引，从 0 开始，不是通道号）或者通道对象 { devId, channel }，如果不传通道索引，则对所有通道生效。

用法：以开启电子放大镜为例

直通

player.pluginMap.magnifier.enable();

回放

// 开启第 0 个通道的放大镜
historyPlayer.pluginMap.magnifier.enable(0);

3. 功能详情

3.1. 电子放大镜

描述

在视频中按住鼠标左键，框选范围，然后松开，被框选的范围会被放大展示。

接口

  • 开启放大镜

    player.pluginMap.magnifier.enable(channelIndex?);

  • 禁用放大镜

    player.pluginMap.magnifier.disable(channelIndex?);

  • 取消放大镜

    player.pluginMap.magnifier.cancelZoomIn(channelIndex?);

注：其中 channelIndex 是通道索引 或 通道对象 { devId, channel }，直通无此参数，回放如果不填，则对所有通道生效。

示例

// 直通开启放大镜
player.pluginMap.magnifier.enable();

// 回放，开启第 0 个通道的放大镜
historyPlayer.pluginMap.magnifier.enable(0);
// 或者
historyPlayer.pluginMap.magnifier.enable({ devId: 'devId', channel: 0 });

// 回放，开启所有通道的放大镜，不填 channelIndex 对所有通道生效
historyPlayer.pluginMap.magnifier.enable();

3.2. 全屏

描述

将视频画面全屏显示。

注：该插件只会全屏显示视频画面，如果业务层还需要全屏显示控制按钮或者其他 UI 组件，请自行实现全屏功能。

接口

  • 全屏

    player.pluginMap.fullscreen.fullscreen();

  • 取消全屏

    player.pluginMap.fullscreen.cancelFullscreen();

注：其中 channelIndex 是回放播放器通道索引 或 通道对象 { devId, channel }，直通无此参数。

示例

// 直通全屏
player.pluginMap.fullscreen.fullscreen();

// 回放第 0 个通道全屏
historyPlayer.pluginMap.fullscreen.fullscreen(0);
// 或者
historyPlayer.pluginMap.fullscreen.fullscreen({ devId: 'devId', channel: 0 });

3.3. 截图

描述

截取视频画面，包括视频图像，adas 叠加，dms 叠加，马赛克效果。

接口

  • 直通

const base64Datas = player.pluginMap.snapshot.capture(options?);

参数

属性值 数据类型 描述
options object 可选参数，控制截图行为
├fileName string 可选参数，下载图片的文件名称, 不填则以时间戳命名
├autodownload boolean 可选参数，是否自动下载截图片，默认 false
  • 回放

const base64Datas = player.pluginMap.snapshot.capture(channelIndex?,[, options]);

参数

属性值 数据类型 描述
channelIndex object[] 必填参数, 可以是是通道索引 或 通道对象 { devId, channel }，直通无此参数，回放如果为 null，则对所有通道生效
options object 可选参数，控制截图行为
├fileName string 可选参数，下载图片的文件名称, 不填则以时间戳命名
├autodownload boolean 可选参数，是否自动下载截图片，默认 false

返回值

属性值 数据类型 描述
base64Datas object[] 带有当前截图的 base64 数据的数组
├channel number 通道号
├devId string 设备 id
├base64 string base64 数据

示例

// 直通截图
player.pluginMap.snapshot.capture();

player.pluginMap.snapshot.caputure({ fileName: 'test', autodownload: true });

// 回放，第 0 个通道截图
historyPlayer.pluginMap.snapshot.capture(0);
// 或者
historyPlayer.pluginMap.snapshot.capture({ devId: 'devId', channel: 0 });

// 回放，所有通道截图
historyPlayer.pluginMap.snapshot.capture();

3.4. 手动马赛克

描述

视频播放过程中，可手动添加固定位置马赛克。

接口

  • 编辑马赛克

    player.pluginMap.codemosiac.editMosiac(channelIndex?);

  • 保存马赛克

    player.pluginMap.codemosiac.saveMosiac(channelIndex?);

  • 清除马赛克

    player.pluginMap.codemosiac.clearMosiac(channelIndex?);

注：其中 channelIndex 是通道索引 或 通道对象 { devId, channel }，直通无此参数，回放如果不填，则对所有通道生效。

示例

// 直通
player.pluginMap.codemosiac.editMosiac();

// 回放，编辑第 0 个通道
historyPlayer.pluginMap.codemosiac.editMosiac(0);
// 或者
historyPlayer.pluginMap.codemosiac.editMosiac({ devId: 'devId', channel: 0 });

// 回放，编辑所有通道
historyPlayer.pluginMap.codemosiac.editMosiac();

// 获取马赛克数据
historyPlayer.pluginMap.codemosiac.getData([{devId, channel}]);
返回
data: [
	{
		devId,
		channel,
		list: [{x, y, w, h, mw, mh}]
	}
]
// 设置马赛克数据
historyPlayer.pluginMap.codemosiac.setData(data);
// 清除马赛克
historyPlayer.pluginMap.codemosiac.clearData([{devId, channel}]);

3.5. 视频信息

描述

展示视频的分辨率，码率，帧率信息。在视频的右下角显示。

接口

  • player.pluginMap.videoInfoLayer.setInfoList(data[], channelIndex?);

示例

// 直通
player.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps']);

// 回放，开启第 0 个通道
historyPlayer.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps'], 0);
historyPlayer.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps'], {
    devId: 'devId',
    channel: 0
});

// 回放，开启所有通道
historyPlayer.pluginMap.videoInfoLayer.setInfoList(['p', 'fps', 'mbps']);

3.6. 直通延迟监测

描述

用于检测直通是否延时，并给出回调。只有直通场景插件才生效。

接口

  • player.pluginMap.liveDelay.setOptions(options: Object)

    参数

属性 类型 说明
interval number 单位：毫秒。onMessage 的回调间隔。
delayTime number 单位：毫秒。延时判断时长，比如设置为 5000，播放过程中延时了 5000ms ，就回调 onMessage
onMessage function 延时的回调函数，参数无。

  • 开启延迟插件

    player.pluginMap.liveDelay.enable()

  • 关闭延迟插件

    player.pluginMap.liveDelay.disable();

示例

player.pluginMap.liveDelay.setOptions({
    interval: 10000,
    delayTime: 5000,
    onMessage: () => {
        console.log('当前直通播放有延时，请检查网络');
    }
});

3.11. 逐帧播放

版本

V1.4.0 以上

描述

一般用于回放截图时挑选想要的画面。

只有回放有该功能。

接口

  • 下一帧

    player.pluginMap.framePlay.nextFrame(step: number = 1);

  • 上一帧

    player.pluginMap.framePlay.prevFrame(step: number = 1);

示例

// 下一帧
player.pluginMap.framePlay.nextFrame(1);
// 下一帧，跳转 10 帧
player.pluginMap.framePlay.nextFrame(10);
// 上一帧
player.pluginMap.framePlay.prevFrame(1);
// 上一帧，跳转 10 帧
player.pluginMap.framePlay.prevFrame(10);
目录