配置skinLayout属性

通过阅读本文,您可以了解阿里云Web播放器SDK的skinLayout的属性、设置规则和可定义属性。

skinLayout属性

Aliplayer可以通过skinLayout属性定制以下三个组件是否显示和显示的位置。

  • 播放按钮

  • Loading动画

  • Controlbar的UI

您可以通过配置播放器的CSS文件:aliplayer-min.css,修改skinLayout属性。配置方式,请参见设置播放器皮肤

skinLayout设置规则

  • skinLayout属性未设置,则默认显示全部。

  • skinLayout设置为空集合([])或false时, 则全部隐藏。

  • 如果是直播ControlBar的children属性,则只能设置为liveDisplay、fullScreenButton、subtitle、setting、volume和snapshot这几种UI组件。

可定义属性

align属性,组件相对于父级组件的对齐方式,可选项如下所示:

  • 'cc',相对于父组件绝对居中。

  • 'tl',相对于父组件左上对齐,受同级组件的占位影响,以组件的相对位置左上角作为偏移原点,可类比于css中的float: left

  • 'tr',相对于父组件右上对齐,受同级组件的占位影响,以组件的相对位置右上角作为偏移原点,可类比于css中的float: right

  • 'tlabs',相对于父组件左上绝对对齐,不受同级组件的占位影响,以父组件左上角作为偏移原点。

  • 'trabs',相对于父组件右上绝对对齐,不受同级组件的占位影响,以父组件右上角作为偏移原点。

  • 'blabs',相对于父组件左下绝对对齐,不受同级组件的占位影响,以父组件左下角作为偏移原点。

  • 'brabs',相对于父组件右下绝对对齐,不受同级组件的占位影响,以父组件右下角作为偏移原点。

x,y属性,组件相对于父级组件的位置,说明如下所示:

  • x,{Number},水平方向偏移量,偏移原点参考align的说明,cc时无效。

  • y,{Number},垂直方向偏移量,偏移原点参考align的说明,cc时无效。

点播默认配置

点播组件参数说明

组件参数

参数说明

bigPlayButton

大播放按钮。

H5Loading

视频缓冲时候出现的加载动画。

errorDisplay

错误提示,当视频播放出错时的提示信息。

infoDisplay

信息提示,当切换字幕、倍速等设置时,播放器展示的提示信息。

tooltip

按钮提示,播放器控制栏上的控件提示信息。例如当光标移到音量按钮或播放按钮上时,会显示音量播放的提示文字。

thumbnail

进度条缩略图。

controlBar

控制栏。

progress

播放进度条。

playButton

控制栏处的播放按钮。

timeDisplay

显示播放时间。

fullScreenButton

全屏按钮。

subtitle

字幕。

setting

设置。

volume

音量。

点播H5默认配置

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"}
 ]
 }
]

配置效果图点播默认配置.png

直播默认配置

直播组件参数说明

组件参数

参数说明

bigPlayButton

大播放按钮。

errorDisplay

错误提示,当视频播放出错时的提示信息。

infoDisplay

信息提示,当切换字幕、倍速等设置时,播放器展示的文字提示信息。

liveDisplay

直播播放时画面上显示LIVE字样。

controlBar

控制栏。

fullScreenButton

全屏按钮。

subtitle

字幕。

setting

设置。

volume

音量。

直播H5模式默认配置

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模式默认配置

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}
 ]
 }
 ]

配置效果图直播默认配置.png