H5Player
FAQ
FAQ

Playback Video Access

1. API Interfaces

1.1. createHistoryPlayer

Description

Create a playback player instance

Example

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

Parameters

domList:

Array of div DOM containers, need to set width and height in style, otherwise the video may collapse or have other style issues.

options:

1.1.1. Basic Configuration

Field Type Description Default Value Required
deviceInfos object[] Device information collection Yes
├ devId string Sub-field of deviceInfos; device unique identifier Yes
├ channels string/Object[] Sub-field of deviceInfos; channel number list; multiple channels separated by commas, e.g. 1,2,3,4. For virtual playback, channels is Object[] Yes
├ chan number Sub-field of channels; for virtual playback, channel number No
├ fileIds string Sub-field of channels; for virtual playback, file ids, multiple separated by commas No
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
mediaProtocol string Media protocol: HTTP_FLV/H5PRIV (S17 effective) HTTP_FLV No
hasAudio number Whether to carry audio, audio enabled by default: 0: not carry; 1: carry (S17 effective) 1 No
expireTime number Address expiration time, default 20 seconds (S17 effective) 20 No
hasTranscode number Whether H265 video transcoding is needed, will transcode by default: 0 => no transcoding, 1 => transcoding (S17 effective) 0 No
playType string Playback type: device: device playback; server: server playback; virServer: virtual playback; mixPlay: fusion playback device No
fileList Object[] Recording file information list (Data source: S17 calendar retrieval) Yes
├ chan number Channel number, starting from 1 Yes
├ streamType string Stream type: MAJOR: main stream; MINOR: sub-stream; defaults to outer parameter streamType Yes
├ storeType string Storage type: MASTER: main storage; BACKUP: sub-storage; CENTER: central storage Yes
├ fileSize number File size No
├ beginTime string Playback start time: yyyy-mm-dd hh:mm:ss Yes
├ endTime string Playback end time: yyyy-mm-dd hh:mm:ss Yes
├ fileUuid string Server recording file uuid, only available in server retrieval No
├ pickFrame number Whether to pick frames for playback, required for frame picking. Can be obtained from evidence details interface. No
├ pickFrameInterval number Frame picking interval, required for frame picking. Can be obtained from evidence details interface. No
├ netUrl string Network stream address (Required for network VOD streams) No
startMultiple number Default playback speed. Values: -4, -2, 1, 2, 4, 8 1 No
enableFramePlayCacheMode boolean Whether to enable cache mode for frame playback, default false (V2.0.2 supported) false No
framePlayCacheModeMaxDuration number Maximum video duration supported by frame playback cache mode, in seconds, maximum support 5 minutes (V2.0.2 supported) 2 * 60 No
startPlayTime string Playback start time, must be between beginTime and endTime. When set, playback will start from this time point. (V2.0.3) No

1.2. Methods

1.2.1. load

Description

The playback player obtains the FLV play URL and loads the video stream.

Example

  • historyPlayer.load()

1.2.2. play

Description

Play, resume from pause, resume from frame-by-frame mode, or resume from stop.

Example

  • historyPlayer.play()

1.2.3. replay

Description

Resume playback after stop.

Example

  • historyPlayer.replay()

1.2.4. pause

Description

Pause video playback.

Example

  • historyPlayer.pause()

1.2.5. stop

Description

Stop the playback of the specified devId channel.

If channel is not provided or is 0, all channels will be stopped.

Example

  • historyPlayer.stop(channel, devId)

Parameter

Property Value Type Description
channel Number The device channel number
devId String Device ID

1.2.6. destroy

Description

Destroy the specified devId channel.

If channel is not provided or is 0, all channels will be destroyed.

Example

  • historyPlayer.destroy(channel, devId)

Parameter

Property Value Type Description
channel Number The device channel number
devId String Device ID

1.2.7. getCacheTime

Description

Get the current cache amount for the channel.

Example

  • historyPlayer.getCacheTime()

Return value

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

1.2.8. seek

Description

Jump to specified time for playback.

Example

  • historyPlayer.seek(time, autoPlay, type)

Parameter

Property Value Type Required Description
time String Yes The time to seek to. Format: YYYY-MM-DD HH:mm:ss
autoPlay Boolean No Whether to automatically play after seeking
type number No Seek method, 0 - call interface, 1 - reconnection method (only supports S17 device playback and mixed playback)

Note: This interface cannot be used to resume playing from a stopped status. To resume playing, please use the play method.

1.2.9. getRenderInfoList

Description

Get rendering-related information through the instance.

Example

  • renderInfoList = historyPlayer.getRenderInfoList()

Return value

renderInfoList:

[ { channel: 1, // The channel number. If it's a virtual playback, it is the virtualized channel number. realChannel: 2, // The channel number provided by the user. index: 1, // The order number of the instance rendering DOM. devId: "devId123", // devId string volume: 0.2, // Volume, number domContainer: HTMLDom, // The container div for the rendered DOM. } ]
Property Name Type Description
domObject Object[] The objects with DOM and the objects with channel data
|-index number The rendering order of the DOMs within the instance
|-devId String Device number
|-channel number The channel number. If it's a virtual playback, it is the virtualized channel number
|-realChannel number The channel number provided by the user
|-volume number The current volume level for the channel
|-domContainer HTML DOM The container div for rendering the DOM

1.2.10. nextFrame

Description

Enter frame-by-frame mode and move forward (future) by specified frames.

Example

  • historyPlayer.nextFrame(step: number = 1);
  • historyPlayer.resume(); // Resume normal playback

Parameter

Property Value Type Description
step number Number of frames to move forward, maximum is 30

1.2.11. prevFrame

Description

Enter frame-by-frame mode and move backward (history) by specified frames.

Example

  • historyPlayer.prevFrame(step: number = 1)
  • historyPlayer.resume(); // Resume normal playback

Parameter

Property Value Type Description
step number Number of frames to move backward, maximum is 30

1.3. Properties

1.3.1. currentTime: number

Description

Get current playback time.

Example

  • Get: historyPlayer.currentTime. Returns UTC timestamp in seconds.

1.3.2. streamType: string

Description

Get or set the player's stream type.

Example

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

Value range: MAJOR (main stream), MINOR (sub-stream)

1.3.3. volume: object

Description

Get or set the volume for each channel on the player.

Example

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

Parameter

Property Value Type Description
volume:Object devId String Device ID
channel Number The device channel number
volume Number The expected channel volume level (ranging from 0 to 1).

1.3.4. ratio: number

Description

Set the playback speed of the player.

Example

  • Set: historyPlayer.ratio = 4

Value range: Number, playback speeds (-4, -2, 1, 2, 4, 8)

1.3.5. (readonly) status: string

Description

Get the current playback status of the player.

Example

  • Get: historyPlayer.status

Possible status values include:

{ newIns: "newIns", // After the player instance is initialized, the data stream is not loaded. initialized: "initialized", // The video stream link has been obtained. onLoading: "onLoading", // The user has initiated loading, and the data stream is being loaded. afterReady: "afterReady", // The data stream was loaded successfully, waiting for user commands. playing: "playing", // Playing. seeking: "seeking", // In the process of seeking. framePlaying: "framePlaying", // Frame-by-frame playback status. paused: "paused", // Paused status. stopped: "stopped", // Stopped status. destroyed: "destroyed", // Destroyed status. play: 'play', // Play status, used for the single renderer. free: 'free', // Black screen status, used for the single renderer. playEnded: "playEnded", // Play ended status. };

2. Extended Functions Access

Extended functions

3. Interface Examples

3.1. General Playback Creation

<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;
 // Open playback
 function playHistory() {
     if (historyPlayer) return;
     const doms = document.getElementsByClassName('div');
     const domList = Array.from(doms);
     historyPlayer = H5Player.createHistoryPlayer(domList, {
         //The playback parameters. You can refer to the following examples.
     });
     historyPlayer.load();
     historyPlayer.hooks.afterReady.tap('ready play', () => {
         historyPlayer.play();
     });
 }
 // Close playback
 function closeHistory() {
     if (historyPlayer) {
         historyPlayer.destroy();
         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',
    platformTimeZoneOffset: 480,
    playType: 'device', // Play type: device playback
    fileList: [
        // Specify the play time period for each channel
        {
            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. Server/Evidence Playback Parameters

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    playType: 'server', // Play type: server playback
    fileIds: 'fileId01,fileId02', // Video play file IDs
    fileList: [
        // Specify the play time period for each channel
        {
            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. Mixed Playback Parameters

Mixed playback allows for simultaneous device playback and server playback. The same device channel can be used for both server and device playback at the same time, with server playback taking priority.

{
    deviceInfos: [
        {
            devId: 'devId001',
            channels: '1,2'
        }
    ],
    beginTime: '2022-02-18 00:00:00',
    endTime: '2022-02-18 12:00:00',
    platformTimeZoneOffset: 480,
    playType: 'mixPlay', // Mixed playback
    fileList: [
        // Specify the play time period for each channel
        // Always provide timeList to ensure the accuracy of the play process
        {
            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. Virtual Playback Parameters

This interface is used for simultaneous server playback across 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',
    platformTimeZoneOffset: 480,
    playType: 'virServer', // Play type: virtual playback
    fileList: [
        // Specify the play time period for each channel
        {
            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'
        }
    ]
}

Note: Special Instructions for Virtual Playback

Virtual playback enables simultaneous play across multiple devices, effectively treating them as a single virtual device for play purposes.

A single channel on a device may have multiple video files. To ensure that fileId corresponds correctly to the device's channel, the channel field in deviceInfos should be specified as an object.

3.6. 【V2.0.1】Cloud Storage Playback Based on S17 FMS

Supports drag, main and sub-stream switching (fileList contains all stream information), pause, resume, speed control, and frame-by-frame playback.

Currently only rm2 and mp4 file formats are supported, and cloud storage needs to allow cross-domain access

{
    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,        // Cloud storage playback file type, 1-rm264/265, 2-mp4
    playType: 'server', // Play type: server playback
    fileIds: 'fileId01,fileId02', // Video play file IDs
    fileList: [
        // Specify the play time period for each channel
        {
            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】Network Stream On-Demand Playback

Frame-level synchronization cannot be guaranteed if time information is not provided.

Supports drag, pause, resume, speed control, and frame-by-frame playback.

Currently only supports mp4 and flv formats, and the server needs to allow cross-domain access

{
    beginTime: '2022-02-18 00:00:00', // Optional. If not provided, starts from 0 by default
    netRequestType: 3,
    platformTimeZoneOffset: 480,
    fileType: 2, // Playback file type, 2-mp4, 3-flv
    fileList: [
        // Specify playback time period for each channel. Only Mp4 format supports time synchronization, flv only supports single channel files
        {
            chan: 1,
            beginTime: '2022-02-18 00:04:00',  // Optional. If time is not specified, the current channel can only play one file
            endTime: '2022-02-18 00:16:00',    // Optional. If time is not specified, the current channel can only play one file
            netUrl : 'http://xxxxxx.mp4'
        },
        {
            chan: 2,
            beginTime: '2022-02-18 00:00:00',  // Optional. If time is not specified, the current channel can only play one file
            endTime: '2022-02-18 00:12:00',    // Optional. If time is not specified, the current channel can only play one file
            netUrl : 'http://xxxxxx.mp4'
        }
    ]
}

3.8. 【V2.0.1】Device Direct Playback

Supports drag, main and sub-stream switching (fileList contains all stream information), pause, resume, speed control, and frame-by-frame playback.

{
    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', // Play type: device playback
    fileList: [
        // Specify the play time period for each channel
        {
            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'
        }
    ]
}
ON THIS PAGE