:skinLayout属性の設定

skinLayout属性

ApsaraVideo Playerでは、skinLayout属性を使用して、次の3種類のコンポーネントを表示するかどうかを指定し、各コンポーネントの表示領域を指定できます。

• 再生用ボタン

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

• コントロールバーのユーザーインターフェイス (UI) コンポーネント

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

skinLayout属性を設定するためのルール

• skinLayout属性を設定しない場合、すべてのコンポーネントがデフォルトで表示されます。

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

• ライブストリーミング用にコントロールバーのchildren属性に設定できるUIコンポーネントは3つだけです。 3つのUIコンポーネントは、liveDisplay、fullScreenButton、およびvolumeです。

コンポーネントをカスタマイズする属性の設定

align属性は、親コンポーネントに対する子コンポーネントのアライメントメソッドを指定します。

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

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

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

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

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

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

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

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

• x: 数値タイプのパラメータ。 x属性は、水平方向のオフセットを指定する。 オフセットオリジンの詳細については、align属性の説明をご参照ください。 align属性がccに設定されている場合、この属性は無効です。

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

ApsaraVideo VODのskinLayout属性のデフォルト設定

ApsaraVideo VODのHTML5プレーヤーのデフォルト設定

skinLayout:[
   {name: "bigPlayButton" 、align: "blabs" 、x: 30、y: 80} 、
    {
      名前: "H5Loading" 、align: "cc"
    },
    {name: "errorDisplay" 、align: "tlabs" 、x: 0、y: 0} 、
    {name: "infoDisplay"},
    {name:"tooltip" 、align:"blabs" 、x: 0、y: 56} 、
    {name: "thumbnail"},
    {
      名前: "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}
      ]
    }
  ]

ApsaraVideo VODのFlash playerのデフォルト設定

skinLayout:[
    {name:"bigPlayButton" 、align:"blabs" 、x:30、y:80} 、
    {
      名前: "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}
      ]
    },
    {
      名前: "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"}
      ]
    }
]

効果

ApsaraVideo LiveのskinLayout属性のデフォルト設定

ApsaraVideo LiveのHTML5プレーヤーのデフォルト設定

skinLayout: [
    {name: "bigPlayButton" 、align: "blabs" 、x: 30、y: 80} 、
    {name: "errorDisplay" 、align: "tlabs" 、x: 0、y: 0} 、
    {name: "infoDisplay" 、align: "cc"} 、
    {
      名前: "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}
        ]
    }
  ]

ApsaraVideo LiveのFlash playerのデフォルト設定

skinLayout: [
    {name: "bigPlayButton" 、align: "blabs" 、x: 30、y: 80} 、
    {name: "errorDisplay" 、align: "tlabs" 、x: 0、y: 0} 、
    {name: "infoDisplay" 、align: "cc"} 、
    {
      名前: "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}
        ]
    }
  ]

効果