简体中文

回放视频接入

1. API 接口

1.1. createHistoryPlayer

描述

创建回放播放实例

实例

historyPlayer = playerjs.createHistoryPlayer(domList: domElement Array, options: Object)

参数

domList：

div DOM 容器的数组，需要设置样式的宽高，不然视频可能塌缩或出现其他样式问题。

options：

1.1.1. 基础配置项

字段	类型	描述	默认值	是否必填
deviceInfos	object[]	设备信息集合		是
├ devId	string	deviceInfos 子元素字段；设备唯一标识		是
├ channels	string/Object[]	deviceInfos 子元素字段；通道号列表；多个通道之间用逗号隔开，例如 1,2,3,4。虚拟回放中 channels 为 Object[]		是
├ chan	number	channels 子元素字段；虚拟回放使用，通道号		否
├ fileIds	string	channels 子元素字段；虚拟回放使用，文件 id，多个用逗号分隔。		否
beginTime	string	回放开始时间：yyyy-mm-dd hh:mm:ss		是
endTime	string	回放结束时间：yyyy-mm-dd hh:mm:ss		是
streamType	string	码流类型： MAJOR：主码流； MINOR：子码流；	MAJOR	否
storeType	string	存储器类型： MASTER：主存储器 BACKUP：子存储器；CENTER：中心存储	MASTER	否
mediaProtocol	string	媒体协议：HTTP_FLV/H5PRIV（S17 有效）	HTTP_FLV	否
hasAudio	number	是否携带音频，默认打开音频： 0：不携带 1：携带（S17 有效）	1	否
expireTime	number	地址过期时间，默认为 20 秒（S17 有效）	20	否
hasTranscode	number	是否需要 H265 视频转码，默认会转码：0 => 不转码， 1 => 转码（S17 有效）	0	否
playType	string	回放类型：device：设备回放; server：服务器回放; virServer:虚拟回放; mixPlay:融合回放;	device	否
fileList	Object[]	录像文件信息列表（数据来源：S17 日历检索）		是
├ chan	number	通道号，从 1 开始		是
├ streamType	string	码流类型： MAJOR：主码流； MINOR：子码流；默认为外层填写参数 streamType		是
├ storeType	string	存储器类型： MASTER：主存储器 BACKUP：子存储器；CENTER：中心存储		是
├ fileSize	number	文件大小		否
├ beginTime	string	回放开始时间：yyyy-mm-dd hh:mm:ss		是
├ endTime	string	回放结束时间：yyyy-mm-dd hh:mm:ss		是
├ fileUuid	string	服务器录像文件 uuid，仅服务器检索有此值		否
├ pickFrame	number	是否抽帧播放，抽帧播放必填。可从证据详情接口获取。		否
├ pickFrameInterval	number	抽帧间隔，抽帧播放必填。可从证据详情接口获取。		否
├ netUrl	string	网络流地址（网络点播流情况下必填）		否
startMultiple	number	默认倍速。取值 -4, -2, 1, 2, 4, 8	1	否
enableFramePlayCacheMode	boolean	帧播放是否启用缓存模式，默认为false（V2.0.2支持）	false	否
framePlayCacheModeMaxDuration	number	帧播放缓存模式支持的最大视频长度，单位为秒，最大支持5分钟（V2.0.2支持）	2 * 60	否
startPlayTime	string	回放起播时间，取值在 beginTime 和 endTime 之间。设置后会从时间点开始播放。(V2.0.3)		否

1.1.2. 设置平台时区

描述

全局生效：允许设置访问平台时区

设备直连时：该参数表示设备时区

网络流时：该参数表示用户时区

参数

字段	类型	描述	默认值	是否必填
platformTimeZoneOffset	number	平台时区偏移量：正负分钟数。	本机时区	是

1.1.3. 设置用户时区

描述

用户时区配置（设置后，传入的时间、回调的时间，均是用户时区）

参数

字段	类型	描述	默认值	是否必填
userTimeZoneOffset	number	用户时区偏移量：正负分钟数。	平台时区	是

1.1.4. 安全性访问

描述

S17 生效：设备端使用 AES 等加密传输，允许 H5Player 侧进行解密播放

参数

字段	类型	描述	默认值	是否必填
hasEncrypt	number	AES 解密类型：0 平台解密；1 前端解密（S17 有效）	0	否

1.1.5. 操作留痕

描述

S17 生效：用户在访问 s17 之后，播放阶段记录的时间等信息，用该参数进行记录。

参数

字段	类型	描述	默认值	是否必填
optId	string	业务操作 id，可用于操作留痕记录等（S17 有效）	“”	否

1.1.6. 内外网访问

描述

S17 生效：允许用户通过内网或者外网访问 S17

参数

字段	类型	描述	默认值	是否必填
addrType	number	地址类型：1：外网地址；2：内网地址；（S17 有效）	1	否

1.1.7. 服务器回放特定参数

描述

S17/云存储生效：服务器回放参数，服务器/证据回放情况下必填

参数

字段	类型	描述	默认值	是否必填
fileIds	string	文件 id，多个文件 id 逗号连接(服务器回放必填)		否
useFileUuid	number	是否使用 uuid。0 - 使用 fileId（默认），1 - 使用 fileUuid。请先和接口提供方确认。用于服务器回放。	1	否

1.1.8. 省流模式（关键帧）播放参数

描述

全局生效：关键帧播放参数，关键帧情况下必填

参数

字段	类型	描述	默认值	是否必填
keyFrame	number	关键帧播放；1：开启，0：关闭	0	否

1.1.9. 回放缓存量控制

描述

S17/云存储/设备直连生效：回放情况下，允许进行缓存历史播放数据，用于优化播放体验。缓存量可通过配置修改

参数

字段	类型	描述	默认值	是否必填
historyCacheSize	Number	指定播放完成的历史缓存数据最大缓存（MB），与浏览器内存相关，建议不超过 1G	400	否
futureCacheTime	Number	当前播放时间点的未来视频数据的最大可缓冲时间（s）；	60	否

1.1.10. 主子码流切换

说明：需要使用主子码流切换方法，fileList 需要传输主子码流全部信息

1.1.11. 【V2.0.1】网络请求类型

描述

为了更好支持多种场景播放，需要支持 S17、云存储直连、网络流（mp4）、设备直连请求等

参数

字段	类型	描述	默认值	是否必填
netRequestType	number	请求类型，1 - S17，2 - 云存储, 3 - 网络流 , 4 - 设备直连	1	否

说明

云存储播放：本质是将证据上传到服务器中的 264/265 文件进行播放，所以流程和服务器回放一致，仅请求类型不同

网络流播放：支持 http-mp4 进行播放，流地址填入 playerjs.config.BaseUrl 中。

设备直连播放：本质还是设备回放，所以流程与设备回放一致。

1.1.12. 【V2.0.1】视频解密密钥

描述

设备直连场景需要由集成方设置密钥进行解密播放

参数

字段	类型	描述	默认值	是否必填
encrypt	object[]	密钥信息	[]	否
├ channel	number	通道信息		否
├ encryptType	string	密钥类型，AES/RSA	AES	否
├ aesParam	object	AES 信息		否
├ aesType	number	AES 加密类型，128、192、256	256	否
├ aesKey	string	AES 密钥		否

1.1.13. 【V2.0.1-P1】设备多路同步回放标识

描述

设备多路同步回放标识，默认同步播放，比如 1078、905 多路播放，需要设置为 false

仅设备回放支持修改

参数

字段	类型	描述	默认值	是否必填
deviceSyncPlay	bool	同步标记	true	否

1.2. 方法

1.2.1. load

描述

回放播放器获取播放 flv 地址并加载视频流

示例

historyPlayer.load()

1.2.2. play

描述

播放，恢复暂停、逐帧情况下恢复、停止后恢复播放

示例

historyPlayer.play()

1.2.3. replay

描述

停止后恢复播放

示例

historyPlayer.replay()

1.2.4. pause

描述

暂停视频播放

示例

historyPlayer.pause()

1.2.5. stop

描述

关闭指定 devId 的 channel 通道的播放

channel 不传或者为 0 表示关闭全部通道

示例

historyPlayer.stop(channel, devId)

参数

属性值	类型	说明
channel	Number	设备通道号
devId	String	设备 id

1.2.6. destroy

描述

销毁指定 devId 的 channel 通道

channel 不传或者为 0 表示销毁全部通道

示例

historyPlayer.destroy(channel, devId)

参数

属性值	类型	说明
channel	Number	设备通道号
devId	String	设备 id

1.2.7. getCacheTime

描述

获取通道当前的缓存量

示例

historyPlayer.getCacheTime()

返回值

属性值	类型	说明
cacheInfo	Object[]	缓存信息数据列表
├ startTime	number	当前缓存分段的开始时间（utc）
├ endTime	number	当前缓存分段的结束时间（utc）

1.2.8. seek

描述

跳转当指定时间播放

示例

historyPlayer.seek(time, autoPlay, type)

参数

属性值	类型	是否必填	说明
time	String	是	需要跳转的时间, 格式：YYYY-MM-DD HH:mm:ss
autoPlay	Boolean	否	seek 完成后是否自动播放
type	number	否	seek 方式，0 - 调用接口， 1 - 重连方式（仅支持 S17 设备回放、融合回放）

注：该接口不可用于停止状态下恢复播放，需要恢复播放请调用 play

1.2.9. getRenderInfoList

描述

可以通过实例获取到渲染相关信息

示例

renderInfoList= historyPlayer.getRenderInfoList()

返回值

renderInfoList：

[
	{
	    channel: 1,  // 通道号，如果是虚拟回放，是虚拟后的通道号
        realChannel: 2, // 用户传入的通道号
        index: 1, // 实例渲染dom顺序 number
        devId: "devId123", // devId string
        volume: 0.2, // 音量 number
        domContainer: HTMLDom, // 渲染的dom的容器div
    }
]

属性名	类型	说明
domObject	Object[]	带有 dom 的对象与通道数据的对象
\|-index	number	实例渲染 dom 顺序
\|-devId	String	设备号
\|-channel	number	通道号，如果是虚拟回放，是虚拟后的通道号
\|-realChannel	number	用户传入的通道号
\|-volume	number	当前通道音量
\|-domContainer	HTML DOM	渲染的 dom 的容器 div

1.2.10. nextFrame

描述

进入逐帧模式，向下（未来）执行几帧

示例

historyPlayer.nextFrame(step: number = 1);
historyPlayer.resume(); // 恢复正常播放

参数

属性值	类型	说明
step	number	向下执行的步数，最大 30

1.2.11. prevFrame

描述

进入逐帧模式，向上（历史）执行几帧

示例

historyPlayer.prevFrame(step: number = 1)
historyPlayer.resume(); // 恢复正常播放

参数

属性值	类型	说明
step	number	向上执行的步数，最大 30

1.3. 属性

1.3.1. currentTime：number

描述

获取当前播放时间

示例

获取：historyPlayer.currentTime。返回 utc 时间戳，单位秒。

1.3.2. streamType：string

描述

获取播放器码流类型 | 设置切换的码流类型

示例

获取：historyPlayer.streamType
设置：historyPlayer.streamType = 'MAJOR'

设置取值范围：MAJOR（主码流）、MINOR（子码流）

1.3.3. volume：object

描述

获取播放器各通道音量 | 设置播放器通道音量

示例

获取：historyPlayer.volume
设置：historyPlayer.volume = [{ devId: 'devId', channel: 1, volume: 0.5 }]

参数

属性值		类型	说明
volume:Object	devId	String	设备 Id
	channel	Number	设备通道号
	volume	Number	预期通道音量，范围 0 - 1

1.3.4. ratio：number

描述

设置播放器播放倍速

示例

设置：historyPlayer.ratio = 4

设置取值范围：Number，播放倍速（-4、-2、1、2、4、8）

1.3.5. (readonly) status: string

描述

获取播放器当前播放状态

示例

获取：historyPlayer.status

获取值状态包括：

{
    newIns: "newIns", // player实例初始化后，未加载数据流
    initialized: "initialized", // 已获取到视频流链接
    onLoading: "onLoading", // 用户执行load，正在加载数据流
    afterReady: "afterReady", // 数据流加载成功，未收到用户指令
    playing: "playing", // 播放中
    seeking: "seeking", // seek中间态
    framePlaying: "framePlaying", // 逐帧播放状态
    paused: "paused", // 暂停状态
    stopped: "stopped", // 停止状态
    destroyed: "destroyed", // 销毁状态
    play: 'play', // 播放状态，单渲染器使用
    free: 'free', // 黑屏状态，单渲染器使用
    playEnded: "playEnded", // 播放结束状态
};

2. 扩展功能接入

扩展功能

3. 接口示例

3.1. 回放通用创建

<script src="./h5-player.js"></script>
<script>
    const H5Player = playerjs;
    H5Player.config = {
        baseURL: 'http://192.168.132.72:21250'
    };
    H5Player.defaultHeaders = {
        _appId: '1',
        _tenantId: '2',
    }
    let historyPlayer = null;
    // 打开回放
    function playHistory() {
        if (historyPlayer) return;
        const doms = document.getElementsByClassName('div');
        const domList = Array.from(doms);
        historyPlayer = H5Player.createHistoryPlayer([domList[0], domList[1]], {
            //回放参数，参考以下示例
            );
        historyPlayer.load();
        historyPlayer.hooks.afterReady.tap('ready play', () => {
            historyPlayer.play();
        });
    }
    // 关闭回放
    function closeHistory() {
        if (historyPlayer) {
            historyPlayer.destory();
            historyPlayer = null;
        }
    }
</script>

3.2. 设备回放参数

{
	deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 00:12:00',
    platformTimeZoneOffset: 480,
    playType: 'device', // 播放类型：设备回放
    fileList: [
        // 指定播放通道播放时间段
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        }
    ]
}

3.3. 服务器/证据回放参数

{
	deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    playType: 'server', // 播放类型：服务器回放
    fileIds: 'fileId01,fileId02', // 视频播放文件id
    fileList: [
        // 指定播放通道播放时间段
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        }
    ]
}

3.4. 融合回放参数

允许同时进行设备回放与服务器回放，同一设备通道在同一时间即能进行服务器回放与设备回放，优先服务器回放。

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ]
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    playType: 'mixPlay', // 融合回放
    fileList: [
        // 指定播放通道播放时间段
        // 请总是传入timeList，确保播放过程的正确性
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        }
    ]
}

3.5. 虚拟回放参数

用于多设备同时进行服务器回放

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: [
                {
                    chan: 1,
                    fileIds: 'fileId,fileId,fileId'
                },
                {
                    chan: 2,
                    fileIds: 'fileId,fileId,fileId'
                }
            ]
        },
        {
            devId: 'devId002',
            channels: [
                {
                    chan: 1,
                    fileIds: 'fileId,fileId,fileId'
                },
                {
                    chan: 2,
                    fileIds: 'fileId,fileId,fileId'
                }
            ]
        }
    ], // 使用虚拟设备回放时，该值必须为数组
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    playType: 'virServer', // 播放类型：虚拟回放
    fileList: [
        // 指定播放通道播放时间段
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        },
        {
            devId: 'devId002',
            chan: 1,
            beginTime: '2022-02-18 00:16:00',
            endTime: '2022-02-18 00:20:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        },
        {
            devId: 'devId002',
            chan: 2,
            beginTime: '2022-02-18 00:18:00',
            endTime: '2022-02-18 00:25:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        }
    ]
}

注：虚拟回放特殊说明

虚拟回放实现了多设备的同时播放的可能，类似于将多个设备整个为一个设备（指一个虚拟设备）进行播放；

某一播放的设备某一通道可能有多个视频文件,因此为保证 fileId 与设备对应通道的对应，deviceInfos 的 channel 为对象数据。

3.6. 【V2.0.1】基于 S17 FMS 云存储播放

支持拖动、主子码流切换（filelist 中包含全部码流信息）、暂停、恢复、倍数、逐帧

目前仅支持 rm2、mp4 文件格式，且云存储需要允许跨域

{
	deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    netRequestType: 2,
    fileType: 1,        //云存储播放文件类型，1 - rm264/265，2 - mp4
    playType: 'server', // 播放类型：服务器回放
    fileIds: 'fileId01,fileId02', // 视频播放文件id
    fileList: [
        // 指定播放通道播放时间段
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'CENTER',
            fileUuid : 'xxxxxxxx'
        }
    ]
}

3.7. 【V2.0.1】网络流点播播放

以下时间未填写情况下，无法保证画面级同步。

支持拖动、暂停、恢复、倍数、逐帧

目前仅支持 mp4、flv，且服务端需要允许跨域

{
    beginTime: '2022-02-18 00:00:00', // 非必填，如未填写情况下，默认从0开始
    netRequestType: 3,
    platformTimeZoneOffset: 480,
    fileType: 2, //播放文件类型，2 - mp4 3 - flv
    fileList: [
        // 指定播放通道播放时间段，仅Mp4格式支持携带时间进行同步，flv仅支持通道单文件
        {
            chan: 1,
            beginTime: '2022-02-18 00:04:00',  // 非必填，如未填写时间情况下，当前通道仅支持播放一个文件
            endTime: '2022-02-18 00:16:00',    // 非必填，如未填写时间情况下，当前通道仅支持播放一个文件
            netUrl : 'http://xxxxxx.mp4'
        },
        {
            chan: 2,
            beginTime: '2022-02-18 00:00:00',  // 非必填，如未填写时间情况下，当前通道仅支持播放一个文件
            endTime: '2022-02-18 00:12:00',    // 非必填，如未填写时间情况下，当前通道仅支持播放一个文件
            netUrl : 'http://xxxxxx.mp4'
        }
    ]
}

3.8. 【V2.0.1】设备直连播放

支持拖动、主子码流切换（filelist 中包含全部码流信息）、暂停、恢复、倍数、逐帧

{
	deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 00:12:00',
    platformTimeZoneOffset: 480,
    netRequestType： 4,
    playType: 'device', // 播放类型：设备回放
    fileList: [
        // 指定播放通道播放时间段
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00',
            streamType : 'MAJOR',
            storeType : 'MASTER'
        }
    ]
}

回放视频接入#

1. API 接口#

1.1. createHistoryPlayer#

1.1.1. 基础配置项#

1.1.2. 设置平台时区#

1.1.3. 设置用户时区#

1.1.4. 安全性访问#

1.1.5. 操作留痕#

1.1.6. 内外网访问#

1.1.7. 服务器回放特定参数#

1.1.8. 省流模式（关键帧）播放参数#

1.1.9. 回放缓存量控制#

1.1.10. 主子码流切换#

1.1.11. 【V2.0.1】网络请求类型#

1.1.12. 【V2.0.1】视频解密密钥#

1.1.13. 【V2.0.1-P1】 设备多路同步回放标识#

1.2. 方法#

1.2.1. load#

1.2.2. play#

1.2.3. replay#

1.2.4. pause#

1.2.5. stop#

1.2.6. destroy#

1.2.7. getCacheTime#

1.2.8. seek#

1.2.9. getRenderInfoList#

1.2.10. nextFrame#

1.2.11. prevFrame#

1.3. 属性#

1.3.1. currentTime：number#

1.3.2. streamType：string#

1.3.3. volume：object#

1.3.4. ratio：number#

1.3.5. (readonly) status: string#

2. 扩展功能接入#

3. 接口示例#

3.1. 回放通用创建#

3.2. 设备回放参数#

3.3. 服务器/证据回放参数#

3.4. 融合回放参数#

3.5. 虚拟回放参数#

3.6. 【V2.0.1】基于 S17 FMS 云存储播放#

3.7. 【V2.0.1】网络流点播播放#

3.8. 【V2.0.1】设备直连播放#