Quick access#

1. Global configuration#

1.1. playerjs.config#

Contains the configuration of the s17 server and the player configuration, which takes effect on all player instances created by StPlayer. This configuration item must be configured before instantiation

Instructions

playerjs.config = { ...customConfig };

1.1.1. Basic configuration items#

1.1.2. Demonstration of AI mosaic capabilities#

describe

When the video contains mosaic information and needs to be displayed. It can block some key images, such as faces, etc.

Configuration items

Example

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

1.1.3. AI information display#

describe

ADAS overlay information display, including lane lines, alarm signs, vehicle signs, pedestrian signs, current speed, distance information of the vehicle in front, etc.

DMS overlay information display, including driver's phone call, driver's distracted driving, and not wearing seat belt warning sign display.

AEB information acquisition, mainly including forward collision and other information, is used to overlay OSD

Bucket information display, mainly showing the position of the bucket teeth in the excavator bucket, used to determine whether the bucket teeth are missing

Configuration items

Example

1.1.4. No video placeholder#

describe

The placeholder plug-in can help when playing back the playback process. When the channel is in no-stream playback state, it can use custom placeholder images or text to implement video placeholder prompts.

Configuration items

Example

// Enable placeholder plug-in
playerjs.config = {
    placeholder: true
};

//Get custom placeholder image
historyplayer.hooks.playerStatusToggle.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 in the custom placeholder DOM through next and try the placeholder
        next(dom);
    });
});

1.1.5. Direct disconnection and reconnection#

describe

When the device is abnormally disconnected due to network fluctuations, this configuration can be used to trigger automatic reconnection.

Configuration items

Example

playerjs.config = {
    reconnection: {
        timeInterval: 3,
        maxRetries: 10
    }
};

1.1.6. Screen-to-body ratio#

describe

Allow users to customize the video screen ratio

Configuration items

Example

playerjs.config = {
    aspectRatio: '16:9'
};

1.1.7. Progress bar callback#

describe

In the case of playback, the playback progress return interval and format allow settings

Configuration items

Example

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

1.1.8. Playback start caching function#

describe

When the network is poor, users want to cache for a period of time before starting to play, so as to ensure smooth playback.

Configuration items

Example

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

1.2. Header configuration#

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.

Instructions

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

Basic configuration items

In addition, custom request headers are allowed

2. Version Manager#

2.1. Introduction#

H5Player supporting version loader is used for asynchronous loading, quick SDK switching, and avoid SDK version conflicts. It is a compressed js that can be used as a project static resource or stored in the server and loaded and retrieved. After the project is loaded successfully, the version loader will add the object of videoSDKVM to the global window. All subsequent loading, switching, etc. of H5Player require the implementation of the channel object.

Note: Internal projects recommend using this manager to load H5Player

2.2. videoSDKVM#

Attributes

• baseUrl: For the basic js access path that needs to be obtained from the server, it is beneficial to the syntax abbreviation during subsequent loading.
• build_time: version loader compilation and packaging time
• currentVersion: Get the currently loaded sdk global object

method

• use

const loadSDKPromise = videoSDKVM.use([url|version]);

When baseUrl is not configured, when using use, you need to fill in the js static resource address placed in the server sdk (the js static resource address needs to have the same origin as the project URL)
After configuring baseUrl, you are allowed to directly fill in the sdk suffix version number stored on the server.

Loading time

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

Example

//Configure baseUrl
videoSDKVM.baseUrl = 'http://192.168.132.72:23000/V1.3.9/';
//Load sdk (sdkjs is slightly larger in size, you can wait for the page to load, or perform lazy loading during the loading process, which can be customized)
// Loading method 1: Configured baseUrl optional method
const loadSDKPromise = videoSDKVM.use('1.3.9.4be8e803f8942cbf37a8') // Just fill in the sdk file name, no need to pay attention to the composition of the sdk file name
//Loading method 2: unlimited
const loadSDKPromise = videoSDKVM.use('sdk version address, such as: http://192.168.132.72:23000/V1.3.9/1.3.9.4be8e803f8942cbf37a8.js')


// After entering the play page, initialize the SDK playback in advance according to the functional requirements. It is not recommended that the user actually needs to click play to initialize it.
//Create instance method 1:
loadSDKPromise.then((playerjs)=>{
     //Need to create passthrough
     const livePlayer = playerjs.createLivePlayer(dom, {...});
})

//Create instance method 2:
// After using use to complete the SDK loading, the playerjs object will be hung in the global window and can be created through this object.
try {
     const livePlayer = playerjs.createLivePlayer(dom, {...});
} catch (e){
     // You can loop window.playerjs to see if it exists and then reload it.
     loopCheckPlayJS();
     // Or use it directly
     const playerjs = await loadSDKPromise();
}