ApsaraVideo VOD:skinLayoutの設定

説明

skinLayoutを使用して、次のコンポーネントを表示するかどうか、およびコンポーネントを表示する位置を指定できます。

• 再生ボタン

• アニメーションコンポーネントの読み込み

• コントロールバー

skinLayoutプロパティは、プレーヤーのaliplayer-min.cssファイルを設定して変更できます。 詳細については、「プレーヤースキンの設定」をご参照ください。

設定ルール

• skinLayoutプロパティを設定しない場合、すべてのコンポーネントが表示されます。

• skinLayoutプロパティを空の配列またはfalseに設定すると、すべてのコンポーネントが非表示になります。

  説明

  skinLayoutプロパティを空の配列またはfalseに設定してプレーヤースキンを無効にすると、エラーが発生してもプレーヤーにエラーメッセージは表示されません。 この場合、errorイベントをリッスンして、エラーが発生したかどうかを確認し、エラーのトラブルシューティングを行います。 エラーコードの詳細については、「エラーコード」をご参照ください。

• ライブストリーミング用にchildrenプロパティを設定する場合は、liveDisplay、fullScreenButton、サブタイトル、設定、ボリューム、およびスナップショットのみを指定できます。

UIコンポーネントの非表示

skinLayoutIgnoreを使用して、既定の設定に基づいて特定のUIコンポーネントを非表示にできます。 サンプルコード：

skinLayoutIgnore: [
  'bigPlayButton', // Hide the big playback button.
  'controlBar.fullScreenButton' // Hide the full screen button on the control bar. You can use the dot operator to select the subcomponent.
]

プロパティ

alignプロパティは、親コンポーネントに対する子コンポーネントの配置方法を指定します。

• 'cc': 親コンポーネントに対する絶対センタリングを示します。

• 't1': 親コンポーネントに対する左上隅の位置合わせを示します。 子コンポーネントは、ピアコンポーネントの位置の影響を受け、ピアコンポーネントの左上隅をオフセット原点とします。 この方法は、CSSファイルのfloat: left設定に似ています。

• 'tr': 親コンポーネントに対する右上隅の位置合わせを示します。 子コンポーネントは、ピアコンポーネントの位置の影響を受け、ピアコンポーネントの右上隅をオフセット原点とします。 この方法は、CSSファイルのfloat: right設定に似ています。

• tlabs: 親コンポーネントに対する左上隅の絶対位置合わせを示します。 子コンポーネントは、ピアコンポーネントの位置に影響されず、親コンポーネントの左上隅をオフセット原点とします。

• 'trabs': 親コンポーネントに対する右上隅の絶対位置合わせを示します。 子コンポーネントは、ピアコンポーネントの位置に影響されず、親コンポーネントの右上隅をオフセット原点とします。

• 'blabs': 親コンポーネントに対する左下の絶対アライメントを示します。 子コンポーネントは、ピアコンポーネントの位置に影響されず、親コンポーネントの左下をオフセット原点とします。

• 'brabs': 親コンポーネントに対する右下の絶対アライメントを示します。 子コンポーネントは、ピアコンポーネントの場所の影響を受けず、親コンポーネントの右下をオフセット起点とします。

xおよびyプロパティは、親コンポーネントの位置をオフセット原点として持つ子コンポーネントの位置を指定します。

• xプロパティは、水平方向のオフセットを指定します。 値は数値です。 オフセットオリジンの詳細については、alignプロパティの説明をご参照ください。 alignをccに設定した場合、このプロパティは無効です。

• yプロパティは、垂直方向のオフセットを指定します。 値は数値です。 オフセットオリジンの詳細については、alignプロパティの説明をご参照ください。 alignがccに設定されている場合、このプロパティは無効です。

オンデマンドビデオ再生用のskinLayoutのデフォルト設定

プロパティの説明

オンデマンドビデオ再生用のHTML5プレーヤーのデフォルト设定

skinLayout:[
   {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {
      name: "H5Loading", align: "cc"
    },
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay"},
    {name:"tooltip", align:"blabs",x: 0, y: 56},
    {name: "thumbnail"},
    {
      name: "controlBar", align: "blabs", x: 0, y: 0,
      children: [
        {name: "progress", align: "blabs", x: 0, y: 44},
        {name: "playButton", align: "tl", x: 15, y: 12},
        {name: "timeDisplay", align: "tl", x: 10, y: 7},
        {name: "fullScreenButton", align: "tr", x: 10, y: 12},
        {name:"subtitle", align:"tr",x:15, y:12},
        {name:"setting", align:"tr",x:15, y:12},
        {name: "volume", align: "tr", x: 5, y: 10}
      ]
    }
  ]

オンデマンドビデオ再生用のFlashプレーヤーのデフォルト设定

skinLayout:[
    {name:"bigPlayButton", align:"blabs", x:30, y:80},
    {
      name:"controlBar", align:"blabs", x:0, y:0,
      children: [
        {name:"progress", align:"tlabs", x: 0, y:0},
        {name:"playButton", align:"tl", x:15, y:26},
        {name:"nextButton", align:"tl", x:10, y:26},
        {name:"timeDisplay", align:"tl", x:10, y:24},
        {name:"fullScreenButton", align:"tr", x:10, y:25},
        {name:"streamButton", align:"tr", x:10, y:23},
        {name:"volume", align:"tr", x:10, y:25}
      ]
    },
    {
      name:"fullControlBar", align:"tlabs", x:0, y:0,
      children: [
        {name:"fullTitle", align:"tl", x:25, y:6},
        {name:"fullNormalScreenButton", align:"tr", x:24, y:13},
        {name:"fullTimeDisplay", align:"tr", x:10, y:12},
        {name:"fullZoom", align:"cc"}
      ]
    }
]

サンプル効果

ライブストリーミング用のskinLayoutのデフォルト設定

プロパティの説明

ライブストリーミング用のHTML5プレーヤーのデフォルト設定

skinLayout: [
    {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay", align: "cc"},
    {
      name: "controlBar", align: "blabs", x: 0, y: 0,
      children: [
          {name:"liveDisplay", align:"tlabs", x: 15, y:6},
          {name:"fullScreenButton", align:"tr", x:10, y: 10},
          {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name:"volume", align:"tr", x:5, y:10}
        ]
    }
  ]

ライブストリーミング用のFlash playerのデフォルト設定

skinLayout: [
    {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay", align: "cc"},
    {
      name: "controlBar", align: "blabs", x: 0, y: 0,
      children: [
          {name:"liveDisplay", align:"tlabs", x: 15, y:25},
          {name:"fullScreenButton", align:"tr",  x:10, y:25},
          {name:"volume", align:"tr",  x:10, y:25}
        ]
    }
  ]

サンプル効果