コンポーネントのカスタマイズ - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

ApsaraVideo Player V2.3.0以降では、コンポーネントをカスタマイズできます。ライブコメントやプレイリストなどのロジックや機能は、再生ライフサイクルのノードで設計できます。

ライフサイクルノード

次の表に、ApsaraVideo Playerで使用される主要なメソッドを示します。

メソッド	説明
init	インスタンスの作成に使用される初期設定をロードします。
createEl	コンポーネントのユーザーインターフェイス (UI) を作成します。パラメータは、プレイヤーコンテナ内のDivです。
created	プレーヤーが作成され、プレーヤーのAPI操作を呼び出すことができることを示します。
準備完了	ビデオの再生準備ができていることを示します。
プレイ	再生を開始します。
pause	プレーヤーがビデオを一時停止することを示します。
演奏	プレーヤーがビデオを再生していることを示します。
待っている	プレイヤーがデータを待っていることを示します。
timeupdate	再生イベントの変更を示します。再生時間は、第2のパラメータのtimeStamp属性によって取得することができる。
error	再生エラーを示します。
終了	再生が終了することを示します。
処分する	プレイヤーを破壊します。

実装

コンポーネントの定義

次のいずれかの方法を使用してコンポーネントを定義できます。

ApsaraVideo Playerが提供するComponentメソッドの呼び出し

var StaticADComponent = Aliplayer.Component({
    init:function(adAddress,toAddress)
    {
      this.adAddress = adAddress;
      this.toAddress = toAddress;
      this.$html = $(html);
    },
    createEl: 関数 (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: 関数 (プレーヤー、e)
    {
    },
    play:function(player,e)
    {
       this.$html.hide();
    },
    一时停止: 机能 (プレーヤー、e)
    {
       this.$html.show();
    }
});

ECMAScript 6が提供するクラスを使用する

説明

この方法は、webpackまたはbabelを使用してプロジェクトをECMAScript 6でビルドする場合に推奨されます。

exportデフォルトクラス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)
    {
    }

    プレイ (プレーヤー、e)
    {
       this.$html.hide();
    }

    一時停止 (プレーヤー、e)
    {
       this.$html.show();
    }
}

定义されたコンポーネントの属性を设定する

コンポーネントを定義したら、そのコンポーネントをプレーヤーの設定に追加して、そのコンポーネントを使用できるようにする必要があります。次の表に、コンポーネントに設定する必要がある属性を示します。

属性	説明
name	コンポーネントの名前を示します。プレーヤーは、コンポーネント名によってコンポーネントを取得する。
type	コンポーネントのタイプ。
args	コンポーネントのパラメータ。

次のコードでは、すべてのパラメーターはコンポーネントの初期パラメーターです。

var player = new Aliplayer({
    id: "J_prismPlayer" 、
     autoplay: true、
     isLive:false、
     playsinline:true、
     controlBarVisibility: 「クリック」、
     cover:"",
     コンポーネント: [
     {name:'adComponent',type:StaticAdComponent,args:['http:// example.aliyundoc.com/cover.png']},]
     notParameComponent、
     {name:'adComponent1',type:notParameComponent}
     ]                 
    });

コンポーネントの取得

getComponentメソッドを呼び出し、nameパラメーターを設定してコンポーネントを取得できます。

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