H5Player
FAQ
FAQ

Custom plug-in access

1. Plug-in specifications

Plug-ins can provide great permissions, which is a double-edged sword. It may introduce many unexpected problems, so be sure to follow the following principles:

  • External methods are uniformly mounted on the outer player instance

2. Player object model

Before writing plug-ins, understanding the player object model is of great help in writing plug-ins:

1.live view

┌─renderer # Player core module
│ ├─wrapper # The outermost dom of the player is the parent node of the container
│ ├─container # Player rendering mounting node (generally also used for plug-in dom mounting), which is the parent node of rendering dom
│ ├─dom # Video rendering dom(canvas | video)
│ └─decoder # Decoding module
         └─renderer # Rendering manager
             ├─decodeType # Renderer type
             ├─decodeType # The current playback time of the renderer
             └─vm # Renderer (mse renderer | webGL renderer)
├─session # The playback session returned by the s17 interface
├─streamType # stream type
└─volume # volume
  1. Playback
┌─channelPlayers[] # Channel player list, new in v1.1, replacing mediaElements in v1.0
│ ├─renderer # Player rendering module
│ │ ├─wrapper # The outermost dom of the player is the parent node of the container
│ │ ├─container # Player rendering mounting node (generally also used for plug-in dom mounting), which is the parent node of rendering dom
│ │ ├─dom # Video rendering dom(canvas | video)
│ │ └─decoder # Decoding module
│ ├─session # The playback session returned by the s17 interface
│ ├─channel # channel number
│ ├─devId # device number
│ ├─streamType # stream type
│ ├─currentTime # Current time, utc seconds
│ └─volume # volume
├─streamType # stream type
├─currentTime # Current time, utc seconds
├─volume # volume
├─status # status
└─requestParams # s17 interface request parameters

3. Create custom plug-ins

3.1. Introduction

Creating a plugin is very easy and requires only two steps:

  1. Create a function that accepts a hooks parameter
export function customPlugin(hooks) {
    // do something ...
}

tips: The plug-in itself is a method and is not used as a constructor, so it does not have an instance.

  1. Register the plug-in into our player
player.plugin.use(customPlugin);

My friends are all shocked! In fact, the main part of the plug-in is the key point. Let’s take the full-screen plug-in as an example and gradually lead you to delve deeper into the plug-in.

3.2. Implement full-screen plug-in

The plug-in function accepts the hooks parameter, which provides us with the entrance to intervene in each life cycle of the player (hooks).

  1. Analyze requirements. The full-screen plug-in needs to expand two methods for the player, which are used to enter full screen/cancel full screen.

  2. Determine the timing of the expansion method. These two methods need to be expanded at a relatively early time in the player so that we can call it as early as possible. Therefore, in the end, from hooks, Select the afterPlayerInit hook, that is, after the player is initialized, it is the time for us to intervene.

  3. The extension method afterPlayerInit injects two parameters player and config into its callback. Here we only need to use player, which represents the current player instance. We can directly add our method on it or Attributes:

export function fullscreen(hooks) {
    hooks.afterPlayerInit.tap('install-fullscreen', (player) => {
        player.fullscreen = function () {
            // ...
        };
        player.cancelFullscreen = function () {
            // ...
        };
    });
}

Tips: Some parameters are injected into each hook callback. For details, see hooks. tips: The tap method here is provided by tapable

  1. Implement the fullscreen function
function fullscreen() {
    let canFullScreen = true;
    var mediaElement = this.renderer.container;
    if (mediaElement.RequestFullScreen) {
        mediaElement.RequestFullScreen();
    } else if (mediaElement.webkitRequestFullScreen) {
        mediaElement.webkitRequestFullScreen();
    } else if (mediaElement.mozRequestFullScreen) {
        mediaElement.mozRequestFullScreen();
    } else if (mediaElement.msRequestFullscreen) {
        mediaElement.msRequestFullscreen();
    } else {
        canFullScreen = false;
        alert("This browser doesn't supporter fullscreen");
    }
}
  1. Implement the cancelFullscreen function
function cancelFullscreen() {
    let canFullScreen = true;
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else {
        canFullScreen = false;
        alert("Exit fullscreen doesn't work");
    }
}
  1. The last step is to register it on the player
player.plugin.use(fullscreen);

At this point, a complete full-screen plug-in has been implemented!

3.3. Implement the magnifying glass plug-in

  1. Requirements analysis We need some DOM and corresponding interactions to select a range. We also need to change our renderer behavior to apply the range selected in the first step to the video and amplify it.

  2. Determine the timing of adding the DOM and the corresponding interaction. The DOM that needs to be added needs to be added before the video is rendered, but it must be when the player is initialized, or after initialization (reasonable). Here we still choose the hook after the player is initialized. That is: afterPlayerInit

hooks.afterPlayerInit.tap('install-magnifier-dom', (player) => {
    //Install related dom and interaction
    player.magnifier = new Magnifier(player);
});

tips: The tap method here is provided by tapable

Magnifier class partial overview

export class Magnifier {
    ...
    constructor(player) {
        const { canvas, renderer } = player;
        const container = canvas.parentNode;

        canvas.addEventListener('mousedown', (e) => {
            ...
            this.rect = new zoomRect(container, x, y);
        });
        canvas.addEventListener('mousemove', (e) => {
            ...
        })
        canvas.addEventListener('mouseup', (e) => {
            ...
        })
        ...
    }
    ...
}

  1. Determine the time to intervene in the renderer. We need to change the renderer behavior, so we need to intervene in the rendering stage. This can be done when the renderer starts rendering, or after the renderer is initialized (reasonable). Here we choose the renderer After initialization is completed, that is afterRendererInit

  2. Expand a method zoomIn for the player's renderer. When the user selects an area in the video, the data of the area will be used as a parameter to call zoomIn to complete the effect of enlarging the user's selection box.

export function magnifier(hooks) {
    hooks.afterPlayerInit.tap('install-magnifier-dom', (player) => {
        //Install related dom and interaction
        // Here the player is passed into the Magnifier as a parameter so that it can access the following zoomIn method (renderer is the child and grandson attribute of the player)
        player.magnifier = new Magnifier(player);
    });
    hooks.afterRendererInit.tap('install-renderer-magnifier', (renderer) => {
        //Change the renderer behavior and extend a scaling method for it;
        renderer.zoomIn = MagnifierForGlRenderer;
        // The implementation of MagnifierForGlRenderer is temporarily omitted and requires a certain understanding of the player webgl.
        // If you need to customize the video rendering level, you can consult the SDK R&D personnel for some understanding.
    });
}

So far, we have implemented an electronic magnifying glass plug-in. Finally, we applied it to the player and made it effective.

player.plugin.use(magnifier);

Tips: The magnifying glass plug-in is a bit too hard-core. This is only an explanation of the key plug-in implementation steps. For the business level, there is generally no need for customization at the rendering level.

ON THIS PAGE