H5Player
FAQ
FAQ
简体中文

回放视频接入

1. API 接口

1.1. createHistoryPlayer

描述

创建回放播放实例

实例

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

参数

domList：

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

options：

字段 类型 描述 默认值 是否必填
deviceInfos object[] 设备信息集合 是
├ devId string deviceInfos 子元素字段；设备唯一标识 是
├ channels string deviceInfos 子元素字段；通道号列表；单个通道取值范围为 1~32，多个通道之间用逗号隔开，例如 1,2,3,4。虚拟回放中 channels 为 Object[] 是
├ fileIds string deviceInfos 子元素字段；文件 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 否
hasEncrypt number AES 解密类型：0 平台解密；1 前端解密 0 否
mediaProtocol string 媒体协议：HTTP_FLV；WS_FLV;1.3.9新增 ；initial HTTP_FLV 否
hasAudio number 是否携带音频，默认打开音频： 0：不携带 1：携带 1 否
timeZoneOffset number 时区偏移量：正负分钟数 0 否
platformTimeZoneOffset number 平台时区偏移量：正负分钟数。理论上和 timeZoneOffset 一样，该参数主要用于播放器内部的时区处理，会优先使用该参数。(如果平台时区不为 0，又没有传 timeZoneOffset 参数，请务必设置 platformTimeZoneOffset) 0 否
optId string 业务操作 id，可用于操作留痕记录等 否
expireTime number 地址过期时间，默认为 20 秒 20 否
hasTranscode number 是否需要 H265 视频转码，默认会转码：0 => 不转码， 1 => 转码 0 否
playType string 回放类型：device：设备回放; server：服务器回放; virServer:虚拟回放; mixPlay:融合回放; device 否
fileIds string 文件 id，多个文件 id 逗号连接(服务器回放必填) 否
useFileUuid number 是否使用 uuid。0 - 使用 fileId（默认），1 - 使用 fileUuid。请先和接口提供方确认。用于服务器回放。 1 否
blurInterval number timeList 同一通道片段在允许的间隔时间合并并为一段； 单位（s） 1 否
keyFrame number 关键帧播放；1：开启，0：关闭 0 否
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，仅服务器检索有此值 否
timeList array 通道的时间信息，表示当前通道的播放序列。包含了通道号，开始，结束时间。供时间对齐使用，保证播放时间同步请总是填写该参数。（数据来源：S17 日历检索） 是
├ devId string 设备 ID 是
├ chan number 通道号，从 1 开始 是
├ beginTime string 回放开始时间：yyyy-mm-dd hh:mm:ss 是
├ endTime string 回放结束时间：yyyy-mm-dd hh:mm:ss 是
├ streamType string 码流类型： MAJOR：主码流； MINOR：子码流；默认为外层填写参数 streamType 否
├ pickFrame number 是否抽帧播放，抽帧播放必填。可从证据详情接口获取。 否
├ pickFrameInterval number 抽帧间隔，抽帧播放必填。可从证据详情接口获取。 否
addrType number 地址类型：1：外网地址；2：内网地址； 否
seekTimeout string 判断 seek 成功等待的时间。单位：秒。 60 否
historyCacheSize Number 指定播放完成的历史缓存数据最大缓存（MB）；最小 500MB，不足则按 500MB 使用 1024 否
futureCacheTime Number 当前播放时间点的未来视频数据的最大可缓冲时间（s）； 60 否
startMultiple number 起播默认倍速。取值 -4, -2, 1, 2, 4, 8. 1 否

1.2. 方法

1.2.1. load

描述

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

示例

  • historyPlayer.load()

1.2.2. play

描述

播放，恢复暂停，停止后恢复播放

示例

  • promise = historyPlayer.play(time)

参数

属性值 类型 说明
time String 停止后，恢复播放到指定时间，格式：YYYY-MM-DD HH:mm:ss

返回值

promise ：在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.3. pause

描述

暂停视频播放

示例

  • promise = historyPlayer.pause()

返回值

promise： 在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.4. stop

描述

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

示例

  • promise = historyPlayer.stop(channel, devId)

参数

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

返回值

promise ：在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.5. stopAll

描述

关闭所有通道的播放；不同于销毁操作，在调用 stopAll 全停止后，可通过 play 重新恢复播放

示例

  • promise = historyPlayer.stopAll()

返回值

promise ：在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.6. destory

描述

销毁指定 devId 的 channel 通道

示例

  • promise = historyPlayer.destory(channel, devId)

参数

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

返回值

promise ：在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.7. destoryAll

描述

销毁所有回放通道

示例

  • promise = historyPlayer.destoryAll()

返回值

promise ：在.then 或 await 语法中获取的第一个返回值为 Boolean，表示当前操作是否成功

1.2.8. getCacheTime

描述

获取通道当前的缓存量

示例

  • historyPlayer.getCacheTime()

返回值

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

1.2.9. seekTo

描述

跳转当指定时间播放，与 setter currentTime 相同效果，但可指定 seek 成功后是否播放

示例

  • historyPlayer.seekTo(time, autoPlay)

参数

属性值 类型 说明
time String 需要跳转的时间, 格式：YYYY-MM-DD HH:mm:ss
autoPlay Boolean seek 完成后是否自动播放

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

1.2.10. getMediaElement

描述

获取指定设备 id + 通道号的通道信息。

示例

  • mediaElement = historyPlayer.getMediaElement(devId, channel)

参数

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

返回值

mediaElement ： 如 {dom: DOM, devId: 'dev001', channel: '1'}

属性名 类型 说明
domObject Object 带有 dom 的对象与通道数据的对象
dom HTML DOM 渲染当前视频的 dom (canvas 或 video)
devId String 设备号
channel String 通道号

1.3. 属性

1.3.1. currentTime：string

描述

获取当前播放时间 | 设置需要跳转的时间

示例

  • 获取：historyPlayer.currentTime。返回 utc 时间戳，单位秒。
  • 设置：historyPlayer.currentTime = 'YYYY-MM-DD HH:mm:ss'

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. aspectRatio：string

描述

设置播放器画面比例

示例

  • historyPlayer.aspectRatio = “full”

设置取值范围：String，full: 铺满、origin: 原始比例、比例模式，如：16:9, 4:3, 1:1

1.3.5. ratio：number

描述

设置播放器播放倍速

示例

  • 设置：historyPlayer.ratio = 4

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

1.3.6. （readonly）status：string

描述

获取播放器当前播放状态

示例

  • 获取：historyPlayer.status

获取值状态包括：

  • INIT 播放器创建完成
  • READY 视频地址获取成功
  • CANPLAY 视频已准备好开始播放
  • PLAY 播放中
  • PAUSE 暂停中
  • STOP 视频已关闭
  • DESTORY 已销毁

1.3.7. （readonly）PlayerStatus：string

描述

与播放器状态需要区分，播放状态是指在播放过程中，通道是有流的播放状态或无流的空闲状态；

示例

获取：historyPlayer.PlayerStatus

获取值状态包括：

  • PLAY 播放中
  • FREE 空闲中

1.3.8. （readonly）mediaElements：object

描述

包含渲染当前视频的 dom (canvas 或 video)等数据 列表

示例

  • 获取：historyPlayer.mediaElements

返回值

属性值 类型 说明
channelData Object[] 数据列表
├ dom HTML DOM 渲染当前视频的 dom (canvas 或 video)
├ devId string 设备号
├ channel number 通道号

2. 扩展功能接入

扩展功能

3. 接口示例

3.1. 回放通用创建

<script src="./streamax-player.js"></script>
<script>
    const StPlayer = H5Player;
    StPlayer.config = {
        httpProtocol: 'http',
        ip: '192.168.132.72',
        port: 21250,
    };
    StPlayer.defaultHeaders = {
        _appId: '1',
        _tenantId: '2',
    }
    let historyPlayer = null;
    // 打开回放
    function playHistory() {
        if (historyPlayer) return;
        const doms = document.getElementsByClassName('div');
        const domList = Array.from(doms);
        historyPlayer = StPlayer.createHistoryPlayer(domList, {
            //回放参数，参考以下示例
            );
        historyPlayer.load();
        historyPlayer.hooks.afterLoaded.tap('loaded', () => {
            historyPlayer.play();
        });
    }
    // 关闭回放
    function closeHistory() {
        if (historyPlayer) {
            historyPlayer.destoryAll();
            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',
    playType: 'device', // 播放类型：设备回放
    timeList: [
        // 指定播放通道播放时间段
        // 请总是传入timeList，确保播放过程的正确性
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00'
        }
    ]
}

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

{
	deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    playType: 'server', // 播放类型：服务器回放
    fileIds: 'fileId01,fileId02', // 视频播放文件id
    timeList: [
        // 指定播放通道播放时间段
        // 请总是传入timeList，确保播放过程的正确性
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:12:00'
        }
    ]
}

3.4. 融合回放参数

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

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ]
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    playType: 'mixPlay', // 融合回放
    fileList: [
        // 融合回放中该参数必填
        {
            chan: 1,
            fileSize: 123456
        }
    ],
    timeList: [
        // 指定播放通道播放时间段
        // 请总是传入timeList，确保播放过程的正确性
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:16:00'
        }
    ]
}

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',
    playType: 'virServer', // 播放类型：虚拟回放
    timeList: [
        // 指定播放通道播放时间段
        // 请总是传入timeList，确保播放过程的正确性
        {
            devId: 'devId001',
            chan: 1,
            beginTime: '2022-02-18 00:04:00',
            endTime: '2022-02-18 00:16:00'
        },
        {
            devId: 'devId001',
            chan: 2,
            beginTime: '2022-02-18 00:00:00',
            endTime: '2022-02-18 00:16:00'
        },
        {
            devId: 'devId002',
            chan: 1,
            beginTime: '2022-02-18 00:16:00',
            endTime: '2022-02-18 00:20:00'
        },
        {
            devId: 'devId002',
            chan: 2,
            beginTime: '2022-02-18 00:18:00',
            endTime: '2022-02-18 00:25:00'
        }
    ]
}

注：虚拟回放特殊说明

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

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

目录