Quick Access#

1. Global Configuration#

1.1. playerjs.config#

It includes configurations for the s17 server and player settings, effective for all player instances created by H5Player. This configuration must be set before instantiation.

Usage Instruction

playerjs.config = { ...customConfig };

1.1.1. Basic Configuration Items#

1.1.2. AI Mosaic Capability Display#

Description

When a video contains mosaic information and needs to be displayed, the AI mosaic capability can be used to obscure certain key visuals, such as faces.

Configuration Items

Example

playerjs.config = {
    mosaic: 2, // Front-end mosaic.
    mosaicType: 1 // Mosaic effect, 0: blur, 1: mosaic
};

1.1.3. AI Information Display#

Description

ADAS overlay information display: The displayed information includes lane markings, alarm identifiers, vehicle markers, pedestrian markers, current speed, and distance to the vehicle ahead.

DMS overlay information display: The displayed information includes alarm identifiers for driver phone usage, distracted driving, and seat belts not fastened.

AEB information acquisition: It mainly includes forward collision used for OSD overlay.

Bucket information display: It mainly displays the bucket tooth position of the excavator to determine if any bucket teeth are missing.

Configuration Items

Alarm List

Distance Unit Mapping Table

Speed Unit Mapping Table

Example

playerjs.config = {
    adas: true,
    dms: true,
    allowAlarms: [8, 10], // Only allow fatigue and collision alarms to be displayed
    langs: [{
    	key: "VEHICLE TOO CLOSE",
    	value: "VEHICLE TOO CLOSE"
    }],
    showCurves: ['distance', 'ttc'],
    aiUnit: {
    	distance: 2, // ft
    	speed: 2, // mph
    }
};

1.1.4 Video Placeholder#

Description

The placeholder plugin can provide a custom placeholder image or text during playback when there is no video stream, offering a visual cue in the absence of video.

Configuration Items

Example

// Enable the placeholder plugin.
playerjs.config = {
    placeholder: true
};
//Obtain a custom placeholder image.
historyplayer.hooks.onVideoPlaceholder.tap('auto play', (status) => {
    console.error('playerStatusToggle', status, status[0]);
    status.forEach(({ status, next }) => {
        const dom = document.createElement('div');
        dom.style.cssText = 'width:100%; height:100%; background-color:red;';
        dom.style.backgroundImage = `url(https://img2.baidu.com/it/u=263214107,966825174&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500)`;
        // Pass the custom placeholder DOM via next to try the placeholder.
        next(dom);
    });
});

1.1.5. Reconnection#

Description

When the device experiences an abnormal disconnection due to network fluctuations, this configuration can trigger automatic reconnection.

Only live view is supported.

Configuration Items

Example

playerjs.config = {
    reconnectCount: 3,
    reconnectTime: 10,
    reconnectAgainCount: 5,
    reconnectAgainTime: 20
};

1.1.6. Progress Bar Callback#

Description

In playback scenarios, the interval and format for progress callbacks can be set.

Configuration Items

Example

playerjs.config = {
    timeHookInterval: 200，
    timeFormatter：‘YYYY-MM-DD HH:mm:ss’
};

1.1.8 Playback Start Buffering#

Description

In cases of poor network conditions, users may want to buffer for a period before starting play to ensure smooth play.

Configuration Items

Example

playerjs.config = {
    needStartBuffer: true，
    bufferTime：1
};

1.1.9. Seek Reconnection wait interval#

Description

GB28181, standard JT1078 and other devices have no absolute RTC time, and need to use the reconnection mode, so the waiting interval between closing and opening can be configured

Configuration Items

playerjs.config = {
    seekRecWaitTime: 500
};

1.2. Header Configuration#

The playerjs.defaultHeaders configuration item. When the media service requires authentication, this configuration item must be configured. The specific parameters depend on the media service interface.

Usage Instruction

playerjs.defaultHeaders = {
 _token: 'token'
};

Basic Configuration Items

Custom request headers are also allowed.

2. Version Manager#

2.1. Introduction#

The H5Player version loader is used for asynchronous loading and quick switching of SDKs, avoiding SDK version conflicts. It is a compressed JS file that can be used as a static resource in the project or stored on a server for loading. Once the version loader is successfully loaded in the project, the videoSDKVM object will be added to the global window. All subsequent loading, switching, etc. of H5Player need to be implemented through this object.

Note: It is recommended to use this manager to load H5Player in internal projects.

2.2. videoSDKVM#

Properties

• baseUrl: It is used to configure the base JS access path for resources that need to be obtained from the server, facilitating shorthand syntax for subsequent loading.
• build_time: The compilation and packaging time of the version loader.
• currentVersion: It is used to retrieve the global object of the currently loaded SDK.

Methods

• use

const loadSDKPromise = videoSDKVM.use([url|version]);
When baseUrl is not configured, the use method requires filling in the static JS resource address in the server-side SDK (The JS static resource address must be the same origin as the project URL).
After configuring baseUrl, you can directly fill in the version number suffix of the SDK stored on the server side.

Loading Timing

It is recommended to preload when entering the video play page.

Example

//Configure baseUrl.
videoSDKVM.baseUrl = 'http://192.168.132.72:23000/V1.3.9/';
// Load the SDK. (The SDK JavaScript file is relatively large so it can be lazy-loaded after the page loads or during the loading process. This can be customized as needed.)
// Loading method 1: If baseUrl is configured, this method can be used.
const loadSDKPromise = videoSDKVM.use('1.3.9.4be8e803f8942cbf37a8') // Just specify the SDK file name. There's no need to worry about the structure of the file name.
// Loading method 2: No restrictions.
const loadSDKPromise = videoSDKVM.use('The SDK version address, e.g., http://192.168.132.72:23000/V1.3.9/1.3.9.4be8e803f8942cbf37a8.js')
// After the user enters the play page, SDK play needs to be initialized in advance according to the functional requirements. It is not recommended to wait until the user clicks play to initialize.
// Instance creation method 1:
loadSDKPromise.then((playerjs)=>{
 // Live view needs to be created.
 const livePlayer = playerjs.createLivePlayer(dom, {...});
})
// Instance creation method 2:
// After the use method is used to load the SDK, the playerjs object will be attached to the global window, allowing you to create an instance through this object.
try {
 const livePlayer = playerjs.createLivePlayer(dom, {...});
} catch (e){
 // You can loop to check if window.playerjs exists, and reload if necessary.
 loopCheckPlayJS();
 // Or directly use
 const playerjs = await loadSDKPromise();
}