All Products
Search
Document Center

Customize components

Last Updated: May 19, 2022

ApsaraVideo Player V2.3.0 and later allow you to customize components. You can design logic and features, such as live comments and playlists on a node in a playback lifecycle.

Lifecycle nodes

The following table describes the key methods that are used in ApsaraVideo Player.

Method

Description

init

Loads the initial configurations used to create an instance.

createEl

Creates the user interface (UI) of components. The parameter is the Div in the player container.

created

Indicates that the player is created and the API operations of the player can be called.

ready

Indicates that the video is ready for playback.

play

Starts the playback.

pause

Indicates that the player pauses a video.

playing

Indicates that the player is playing a video.

waiting

Indicates that the player is waiting for data.

timeupdate

Indicates the changes to playback events. The playback time can be obtained by the timeStamp attribute of the second parameter.

error

Indicates a playback error.

ended

Indicates that the playback ends.

dispose

Destroys a player.

Implementation

Define a component

You can define a component by using one of the following methods:

  • Call the Component method that is provided by ApsaraVideo Player

var StaticADComponent = Aliplayer.Component({
    init:function(adAddress,toAddress)
    {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    },
    createEl:function(el)
    {
      this.$html.find('.ad').attr('src',this.adAddress);
      var $adWrapper = this.$html.find('.ad-wrapper');
      $adWrapper.attr('href',this.toAddress);
      $adWrapper.click(function(){
        Aliplayer.util.stopPropagation();
      });
      this.$html.find('.close').click(function(){
        this.$html.hide();
      });
      $(el).append(this.$html);
    },
    ready:function(player,e)
    {
    },
    play:function(player,e)
    {
       this.$html.hide();
    },
    pause:function(player,e)
    {
       this.$html.show();
    }
});
  • Use the class that is provided by ECMAScript 6

Note

This method is recommended when your project is built in ECMAScript 6 by using webpack or babel.

export default class StaticADComponent
{
    constructor(adAddress,toAddress) {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    }

    createEl(el)
    {
      this.$html.find('.ad').attr('src',this.adAddress);
      this.$html.attr('href',this.toAddress);
      let $adWrapper = this.$html.find('.ad-wrapper');
      $adWrapper.attr('href',this.toAddress);
      $adWrapper.click(()=>{
        Aliplayer.util.stopPropagation();
      });
      this.$html.find('.close').click(()=>{
        this.$html.hide();
      });
      $(el).append(this.$html);
    }


    ready(player,e)
    {
    }

    play(player,e)
    {
       this.$html.hide();
    }

    pause(player,e)
    {
       this.$html.show();
    }
}

Set the attributes of the defined component

After you define a component, you need to add the component to the configurations of the player so that the component can be used. The following table describes the attributes that you need to set for the component.

Attribute

Description

name

The name of the component. The player obtains the component by the component name.

type

The type of the component.

args

The parameters of the component.

In the following code, all parameters are the initial parameters of a component.

var player = new Aliplayer({
    id: "J_prismPlayer",
     autoplay: true,
     isLive:false,
     playsinline:true,
     controlBarVisibility:"click",
     cover:"",
     components:[
     {name:'adComponent',type:StaticAdComponent,args:['http://example.aliyundoc.com/cover.png']},
     notParameComponent,
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

Obtain a component

You can call the getComponent method and set the name parameter to obtain a component.

var component = player.getComponent('adComponent');