H5Player
FAQ
FAQ

Playback Video Access

1. APIs

1.1. createHistoryPlayer

Description

Create a playback instance

Example

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

Parameters

domList:

The array of div DOM containers needs to set the width and height of the style, otherwise the video may collapse or other style problems may occur.

options:

Field Type Description Default Value Required
deviceInfos object[] Device information collection Yes
├ devId string deviceInfos sub-element field; device unique identifier Yes
├ channels string deviceInfos sub-element field; channel number list; the value range of a single channel is 1~32, and multiple channels are separated by commas, such as 1,2,3,4. In virtual playback, channels are Object[] Yes
├ fileIds string deviceInfos sub-element field; file id, multiple separated by commas. Yes
beginTime string Playback start time: yyyy-mm-dd hh:mm:ss Yes
endTime string Playback end time: yyyy-mm-dd hh:mm:ss Yes
streamType string Stream type: MAJOR: main stream; MINOR: sub-stream; MAJOR No
storeType string Storage type: MASTER: main storage BACKUP: sub-storage; CENTER: central storage MASTER No
hasEncrypt number AES decryption type: 0 platform decryption; 1 front-end decryption 0 No
mediaProtocol string Media protocol: HTTP_FLV; WS_FLV; New in 1.3.9; initial HTTP_FLV No
hasAudio number Whether to carry audio, audio is turned on by default: 0: not carried 1: carried 1 No
timeZoneOffset number Time zone offset: plus or minus minutes 0 No
platformTimeZoneOffset number Platform time zone offset: plus or minus minutes. Theoretically, like timeZoneOffset, this parameter is mainly used for time zone processing inside the player, and this parameter will be used first. (If the platform time zone is not 0 and no timeZoneOffset parameter is passed, be sure to set platformTimeZoneOffset) 0 No
optId string Business operation id, which can be used to operate trace records, etc. No
expireTime number Address expiration time, default is 20 seconds 20 No
hasTranscode number Whether H265 video transcoding is required, it will be transcoded by default: 0 => no transcoding, 1 => transcoding 0 No
playType string Playback type: device: device playback; server: server playback; virServer: virtual playback; mixPlay: fusion playback; device No
fileIds string File id, multiple file ids comma concatenation (required for server playback) No
useFileUuid number Whether to use uuid. 0 - use fileId (default), 1 - use fileUuid. Please confirm with the interface provider first. Used for server replay. 1 No
blurInterval number timeList The segments of the same channel are merged into one segment at the allowed interval; unit (s) 1 No
keyFrame number Key frame playback; 1: on, 0: off 0 No
fileList Object[] Recording file information list, required in fusion playback mode, non-required items in sub-elements default to parameters filled in by the outer layer (data source: S17 calendar retrieval) No
├ chan number Channel number, starting from 1 No
├ streamType string Stream type: MAJOR: main stream; MINOR: sub-stream; the default is to fill in the outer parameter streamType No
├ storeType string Storage type: MASTER: main storage BACKUP: sub-storage; CENTER: central storage No
├ fileSize number file size No
├ beginTime string Playback start time: yyyy-mm-dd hh:mm:ss No
├ endTime string Playback end time: yyyy-mm-dd hh:mm:ss No
├ fileUuid string Server recording file uuid, only server retrieval has this value No
timeList array The time information of the channel, indicating the playback sequence of the current channel. Contains channel number, start and end time. For time alignment, please always fill in this parameter to ensure playback time synchronization. (Data source: S17 calendar retrieval) Yes
├ devId string device ID Yes
├ chan number Channel number, starting from 1 Yes
├ beginTime string Playback start time: yyyy-mm-dd hh:mm:ss Yes
├ endTime string Playback end time: yyyy-mm-dd hh:mm:ss Yes
├ streamType string Stream type: MAJOR: main stream; MINOR: sub-stream; the default is to fill in the outer parameter streamType No
├ pickFrame number Whether to pick frames for playback, required for pick frame playback. It can be obtained from the evidence details interface. No
├ pickFrameInterval number Frame picking interval, required for frame picking playback. It can be obtained from the evidence details interface. No
addrType number Address type: 1: External network address; 2: Intranet address; No
seekTimeout string The time to wait for successful seek. Unit: seconds. 60 No
historyCacheSize Number Specify the maximum cache (MB) of historical cache data after playback is completed; the minimum is 500MB, if it is insufficient, use 500MB 1024 No
futureCacheTime Number The maximum buffering time (s) of future video data at the current playback time point; 60 No
startMultiple number Default playback speed at start. Value range: -4, -2, 1, 2, 4, 8 1 No

1.2. Methods

1.2.1. load

Description

The playback player gets the playback flv address and loads the video stream

Example

  • historyPlayer.load()

1.2.2. play

Description

Play, resume pause, resume play after stopping

Example

  • promise = historyPlayer.play(time)

Parameters

Property Value Type Description
time String After stopping, resume playback to the specified time, format: YYYY-MM-DD HH:mm:ss

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.3. pause

Description

Pause video playback

Example

  • promise = historyPlayer.pause()

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.4. stop

Description

Close the playback of the channel with the specified devId

Example

  • promise = historyPlayer.stop(channel, devId)

Parameters

Property Value Type Description
channel Number Device channel number
devId String Device id

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.5. stopAll

Description

Close the playback of all channels; different from the destroy operation, after calling stopAll to stop all, playback can be resumed through play

Example

  • promise = historyPlayer.stopAll()

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.6. destroy

Description

Destroy the channel with the specified devId

Example

  • promise = historyPlayer.destroy(channel, devId)

Parameters

Property Value Type Description
channel Number Device channel number
devId String Device id

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.7. destoryAll

Description

Destroy all playback channels

Example

  • promise = historyPlayer.destoryAll()

Return Value

promise: The first return value obtained in .then or await syntax is Boolean, indicating whether the current operation is successful.

1.2.8. getCacheTime

Description

Get the current cache amount of the channel

Example

  • historyPlayer.getCacheTime()

Return Value

Property Value Type Description
cacheInfo Object[] Cache information data list
├ startTime number The start time of the current cache segment (utc)
├ endTime number The end time of the current cache segment (utc)

1.2.9. seekTo

Description

Jump to play at the specified time, which has the same effect as the setter currentTime, but you can specify whether to play after the seek is successful.

Example

  • historyPlayer.seekTo(time, autoPlay)

Parameters

Property Value Type Description
time String The time to jump, format: YYYY-MM-DD HH:mm:ss
autoPlay Boolean Whether to automatically play after seek is completed

Note: This interface cannot be used to resume playback in stopped state. Please call play if you need to resume playback.

1.2.10. getMediaElement

Description

Get the channel information of the specified device id + channel number.

Example

  • mediaElement = historyPlayer.getMediaElement(devId, channel)

Parameters

Property Value Type Description
devId String Device number
channel String Channel number

Return Value

mediaElement: such as {dom: DOM, devId: 'dev001', channel: '1'}

Attribute Name Type Description
domObject Object Object with dom and channel data
dom HTML DOM The dom (canvas or video) that renders the current video
devId String Device number
channel String Channel number

1.3. Properties

1.3.1. currentTime: string

Description

Get the current playback time | Set the time to jump

Example

  • Get: historyPlayer.currentTime. Returns a UTC timestamp in seconds.
  • Set: historyPlayer.currentTime = 'YYYY-MM-DD HH:mm:ss'

1.3.2. streamType: string

Description

Get the player stream type | Set the switched stream type

Example

  • Get: historyPlayer.streamType
  • Set: historyPlayer.streamType = 'MAJOR'

Set value range: MAJOR (main stream), MINOR (sub-stream)

1.3.3. volume: object

Description

Get the volume of each channel of the player | Set the volume of the player channel

Example

  • Get: historyPlayer.volume
  • Set: historyPlayer.volume = [{ devId: 'devId', channel: 1, volume: 0.5 }]

Parameters

Property Value Type Description
volume:Object devId String Device Id
channel Number Device channel number
volume Number Expected channel volume, range 0 - 1

1.3.4. aspectRatio: string

Description

Set player aspect ratio

Example

  • historyPlayer.aspectRatio = "full"

Set value range: String, full: full, origin: original ratio, ratio mode, such as: 16:9, 4:3, 1:1

1.3.5. ratio: number

Description

Set player playback speed

Example

  • Set: historyPlayer.ratio = 4

Set value range: Number, playback speed (-4, -2, 1, 2, 4, 8)

1.3.6. (readonly) status: string

Description

Get the current playback status of the player

Example

  • Get: historyPlayer.status

Get value status includes:

  • INIT player creation completed
  • READY video address obtained successfully
  • CANPLAY video is ready to start playing
  • PLAY Playing
  • PAUSE is paused
  • STOP video is closed
  • DESTORY Destroyed

1.3.7. (readonly) PlayerStatus: string

Description

It needs to be distinguished from the player state. The playback state refers to whether the channel is in the playback state with flow or in the idle state without flow during the playback process.

Example

Get: historyPlayer.PlayerStatus

Get value status includes:

  • PLAY Playing
  • FREE idle

1.3.8. (readonly) mediaElements: object

Description

Contains a list of data such as DOM (canvas or video) that renders the current video

Example

  • Get: historyPlayer.mediaElements

Return Value

Property Value Type Description
channelData Object[] Data list
├ dom HTML DOM The dom (canvas or video) that renders the current video
├ devId string Device number
├ channel number Channel number

2. Extended Functions Access

Extended functions

3. Interface Examples

3.1. General Playback Creation

<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;
    // Open playback
    function playHistory() {
        if (historyPlayer) return;
        const doms = document.getElementsByClassName('div');
        const domList = Array.from(doms);
        historyPlayer = StPlayer.createHistoryPlayer(domList, {
            //Playback parameters, refer to the following examples
        });
        historyPlayer.load();
        historyPlayer.hooks.afterLoaded.tap('loaded', () => {
            historyPlayer.play();
        });
    }
    // Close playback
    function closeHistory() {
        if (historyPlayer) {
            historyPlayer.destoryAll();
            historyPlayer = null;
        }
    }
</script>

3.2. Device Playback Parameters

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 00:12:00',
    playType: 'device', // Play type: device playback
    timeList: [
        // Specify the playback time period of the playback channel
        // Please always pass in timeList to ensure the correctness of the playback process
        {
            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. Server/Evidence Playback Parameters

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    playType: 'server', // Play type: server playback
    fileIds: 'fileId01,fileId02', // Video playback file id
    timeList: [
        // Specify the playback time period of the playback channel
        // Please always pass in timeList to ensure the correctness of the playback process
        {
            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. Fusion Playback Parameters

Device playback and server playback are allowed at the same time. The same device channel can perform server playback and device playback at the same time, with priority given to server playback.

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    playType: 'mixPlay', // Fusion playback
    fileList: [
        // This parameter is required in fusion playback
        {
            chan: 1,
            fileSize: 123456
        }
    ],
    timeList: [
        // Specify the playback time period of the playback channel
        // Please always pass in timeList to ensure the correctness of the playback process
        {
            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. Virtual Playback Parameters

Used for simultaneous server playback on multiple devices

{
    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'
                }
            ]
        }
    ], // When using virtual device playback, this value must be an array
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    playType: 'virServer', // Play type: virtual playback
    timeList: [
        // Specify the playback time period of the playback channel
        // Please always pass in timeList to ensure the correctness of the playback process
        {
            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'
        }
    ]
}

Note: Special instructions for virtual playback

Virtual playback realizes the possibility of simultaneous playback on multiple devices, which is similar to playing multiple devices into one device (referring to a virtual device).

A certain channel of a certain playing device may have multiple video files, so in order to ensure that the fileId corresponds to the corresponding channel of the device, the channel of deviceInfos is object data.

ON THIS PAGE