HOOKS Access#

The H5Player implements hook functions during playing based on webpack/tapable. This provides the access party with the feasibility of intervening during playing.

1. Interface Summary#

2. APIs#

2.1. afterPlayerInit#

Description

It is triggered after the player is initialized, and is currently only effective for live view instances.

Example

• player.hooks.afterPlayerInit.tap('after init', callback(player, config));

Note: The player in the example refers to the player instance.

Callback Parameters

2.2. afterLoaded#

Description

It is triggered after the player obtains the media stream address. At this point, the video has not started playing nor has the intercom been listened. It is effective for live-view players, playback players, and intercom listening instances.

Example

• player.hooks.afterLoaded.tap('afterLoaded', callback(player, eventData));

Callback Parameters

2.3. afterReady#

Description

It is triggered when the player is ready to start playing, applicable to both live view and playback.

Example

• player.hooks.afterReady.tap('afterReady', callback(player, eventData));

Callback Parameters

2.4. beforePlay#

Description

It is triggered before the player receives the play notification. For live view, the play starts automatically when the load is called, so it only takes effect for playback.

Example

• player.hooks.beforePlay.tap('beforePlay', callback(player, eventData));

Callback Parameters

2.5. afterPlay#

Description

It is triggered after the player receives the play notification, effective for playback.

Example

• player.hooks.afterPlay.tap('afterPlay', callback(player, eventData));

Callback Parameters

2.6. beforePause#

Description

It is triggered before the player receives the pause notification, effective for playback.

Example

• player.hooks.beforePause.tap('beforePause', callback(player, eventData));

Callback Parameters

2.7. afterPause#

Description

It is triggered after the player receives the pause notification, effective for playback.

Example

• player.hooks.afterPause.tap('afterPause', callback(player, eventData));

Callback Parameters

2.8. beforeStop#

Description

Callback before the video stops, effective for playback.

Example

• player.hooks.beforeStop.tap('beforeStop', callback(player, eventData));

Callback Parameters

2.9. afterStop#

Description

It is triggered after the player stops.

Example

• player.hooks.afterStop.tap('after stop', callback[player, timeData]);

Callback Parameters

The timeData parameter is of Object type and is only applicable for intercom listening. The structure is as follows:

2.10. beforeSeek#

Description

It is triggered when the user calls to seek, entering a Seeking status. This is only effective for playback.

Example

• player.hooks.afterSeek.tap('after seek', callback(player, eventData));

Callback Parameters

2.11. afterSeek#

Description

It is triggered after the seek operation is completed. This is only effective for playback.

Example

• player.hooks.afterSeek.tap('after seek', callback(timeData));

Callback Parameters

Note: In case of a seek failure, the onError callback will be used.

2.12. beforeDestroy#

Description

Callback before the video is destroyed.

Example

• player.hooks.beforeDestroy.tap('beforeDestroy', callback(player, preventExecution));

Callback Parameters

2.13. onPlayEnded#

Description

It is triggered when playback is completed.

Example

• player.hooks.onPlayEnded.tap('onPlayEnded', callback(player));

2.14. onError#

Description

The error callback that listens to various errors occurring during playback or live view.

Example

player.hooks.onError.tap('An error occurred', callback(errorInfo, player?));

Callback Parameters

For details, refer to error-info

2.15. startReconnect#

Description

The hook triggered when starting to reconnect after a disconnection in live view.

Example

• player.hooks.startReconnect.tap('start reconnecting', callback(player));

2.16. reconnectSuccess#

Description

The hook triggered upon successful reconnection after a disconnection in live view.

Example

• player.hooks.reconnectSuccess.tap('reconnectSuccess', callback(player));

2.17. onVideoPlaceholder#

Description

Triggered when the playback channel status changes. It needs to be distinguished from the player status. The playback status refers to whether the channel is playing a stream or is idle. The placeholder plugin can be used to customize the mask when there is no video.

Example

• player.hooks.onVideoPlaceholder.tap('placeholder', callback(playersStatus));

Callback Parameters

2.18. onLoading#

Description

Used for callback of loading percentage and network speed information, applicable to both live view and playback.

Note: In live view mode, you cannot use the done parameter to determine if loading is finished. You need to check if the channel's percent equals 100 to cancel loading for a single channel.

Example

• player.hooks.onLoading.tap('on loading', callback(loadingList, done));

Callback Parameters

2.19. loadingTimeout#

Description

Used to determine the buffer timeout. The timeout duration follows the general configuration, with a default of 20s.

Example

• player.hooks.loadingTimeout.tap('loading timeout', callback(deviceInfos));

Callback Parameters

2.20. onTimeChange#

Description

Actively pushes time during playback. The push frequency can be configured in config. The default value is 500ms.

For smooth timeline movement in the business layer, the frequency can be set lower, especially for small files in server playback.

Example

• player.hooks.onTimeChange.tap('time change', callback(timeData));

Callback Parameters

2.21. onChannelRender#

Description

It provides the device information or AI information of the currently rendered frame in the player.

Example

• player.hooks.onChannelRender.tap('onChannelRender', callback(frame, chanPlayer))

Callback Parameters

2.22. onMediaInfo#

Description

Media information feedback

Example

• player.hooks.onMediaInfo.tap('onMediaInfo', callback(player, eventData))

Callback Parameters

2.23. onMessage#

Description

Prompt information callback

Example

• player.hooks.onMessage.tap('onMessage', callback(code, message))

Callback Parameters

2.24. onFramePlayNoData#

Description

Frame-by-frame no data callback

Example

• player.hooks.onFramePlayNoData.tap('frame play no data', callback(player, type))

Callback Parameters

options

2.25. onStateChange#

Description
Player state change callback

Example

• player.hooks.onStateChange.tap('state change', callback(player, stateInfo, state))

Callback Parameters

stateInfo

type TStateInfo = {
    [key: string]: {
        state: string, // Refer to player states
        info: {
            oneDev: {
                devId: string, // Device ID
                channel: string, // Channel number
            },
            devId: string, // Device ID
            channel: string, // Channel number
        }
    }
}

2.26. onStreamTypeChange#

Description

Player stream switching callback

Example

• player.hooks.onStreamTypeChange.tap('stream change', callback(player, eventData))

Callback Parameters

TEventData

type TEventData = {
    devId: string, // Device ID
    channel: number, // Channel number
    streamType: 'MAJOR' | 'MINOR', // Stream type
}

2.27. onInputAudioDevicesChange#

Description

Player audio input devices change callback

Example

• player.hooks.onInputAudioDevicesChange.tap('device change', callback(eventData, player))

Callback Parameters

TEventData

type TEventData = {
    audioDevicesInput: MediaDeviceInfo[], // Input devices information
    audioDevicesOutput: MediaDeviceInfo[], // Output devices information
    deviceInputIdUse: string | undefined, // Currently used input device ID
}