全部产品

设置播放器皮肤

Aliplayer皮肤设置分为HTML5模式与Flash模式。通过阅读本文,了解如何设置播放器皮肤。

HTML5播放器皮肤设置

默认设置:页面引入文件。

<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/{SDK版本号}/skins/default/aliplayer.css" />

css文件中包含皮肤素材:http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png

配置信息:内部组件都要有配置。

名称

说明

prism-player

播放器配置

prism-big-play-btn

大播放按钮

prism-play-btn

播放按钮

prism-play-btn.playing

播放过程中暂停

prism-live-display

直播图标(直播时会占用播放按钮位置)

prism-fullscreen-btn

全屏按钮

prism-fullscreen-btn.fullscreen

全屏后按钮

prism-volume

声音按钮

prism-volume.mute

静音后按钮

prism-cover

播放器开始前封面配置

prism-controlbar

播放器控制栏

prism-time-display

时间显示总时间

prism-time-display .current-time

当前时间

prism-progress

进度条

prism-progress-loaded

加载进度

m-progress-cursor

进度条位置

prism-speed-selector

倍速播放

prism-stream-selector

清晰度切换

prism-snapshot-btn

截图按钮

prism-ErrorMessage

错误显示

prism-info-display

信息显示

配置方式

具体可以参照播放器的CSS配置文件:aliplayer-min.css

例如大播放按钮,示例代码如下所示。

.prism-player .prism-big-play-btn {
  width: 90px;
  height: 90px;
  background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}

示例代码参数说明。

参数

说明

width

宽度,单位:px(像素)

height

高度,单位:px(像素)

background

图像URL

no-repeat

不平铺(同css)

-2px

x轴位置,y轴位置

Flash播放器皮肤设置

默认使用文件

http://g.alicdn.com/de/prismplayer-flash/{SDK版本号}/atlas/defaultSkin.xml
http://g.alicdn.com/de/prismplayer-flash/{SDK版本号}/atlas/defaultSkin.png

.png文件为皮肤按钮素材,.xml文件指定皮肤按钮位置。 播放器默认在http://g.alicdn.com/de/prismplayer-flash/{SDK版本号}/atlas/目录下查找defaultSkin.xml与defaultSkin.png文件。

配置信息

设定元件素材图像:

<TextureAtlas imagePath="defaultSkin.png">

设定元件:

名称

说明

bigPlayDown

大播放按钮 点击后图标

bigPlayOver

大播放按钮 鼠标划过时图标

bigPlayUp

大播放按钮 未点击时图标

clarityBgDown

清晰度标示 点击后图标

clarityBgOver

清晰度标示 鼠标划过时图标

clarityBgUp

清晰度标示 未点击时图标

followDisabled

下一条按钮 禁止时图标

followDown

下一条按钮 点击后图标

followOver

下一条按钮 鼠标划过时图标

followUp

下一条按钮 未点击时图标

fullScreenDisabled

全屏按钮 禁止时图标

fullScreenDown

全屏按钮 点击后图标

fullScreenOver

全屏按钮 鼠标划过时图标

fullScreenUp

全屏按钮 未点击时图标

liveicon

直播标志图片

muteDown

静音按钮 点击后图标

muteOver

静音按钮 鼠标划过时图标

muteUp

静音按钮 未点击时图标

normalScreenDown

退出全屏按钮 点击后图标

normalScreenOver

退出全屏按钮 鼠标划过时图标

normalScreenUp

退出全屏按钮 未点击时图标

pauseDisabled

暂停按钮 禁止时图标

pauseDown

暂停按钮 点击后图标

pauseOver

暂停按钮 鼠标划过时图标

pauseUp

暂停按钮 未点击时图标

playDisabled

播放按钮 禁止时图标

playDown

播放按钮 点击后图标

playOver

播放按钮 鼠标划过时图标

playUp

播放按钮 未点击时图标

replayDown

重播按钮 点击后图标

replayOver

重播按钮 鼠标划过时图标

replayUp

重播按钮 未点击时图标

setDown

设置按钮 点击后图标

setOver

设置按钮 鼠标划过时图标

setUp

设置按钮 未点击时图标

volMaxDown

大声音(>=50%) 点击后图标

volMaxOver

大声音(>=50%) 鼠标划过时图标

volMaxUp

大声音(>=50%) 未点击时图标

volMinDown

小声音(<50%) 点击后图标

volMinOver

小声音(<50%) 鼠标划过时图标

volMinUp

小声音(<50%) 未点击时图标

zoom100Down

全屏时100%比例按钮 点击后图标

zoom100Over

全屏时100%比例按钮 鼠标划过时图标

zoom100Up

全屏时100%比例按钮 未点击时图标

zoom75Down

全屏时75%比例按钮 点击后图标

zoom75Over

全屏时75%比例按钮 鼠标划过时图标

zoom75Up

全屏时75%比例按钮 未点击时图标

zoom50Down

全屏时50%比例按钮 点击后图标

zoom50Over

全屏时50%比例按钮 鼠标划过时图标

zoom50Up

全屏时50%比例按钮 未点击时图标

配置方式

参照默认皮肤设置,在http://[domain]/[path]/目录下存放skin.png与skin.xml文件,并在player的输入参数中添加skinRes:"http://domain/path/skin"

例如大播放按钮,示例代码如下所示。

<SubTexture name="bigPlayDown" x="2" y="94" width="90" height="90"/>
<SubTexture name="bigPlayOver" x="94" y="2" width="90" height="90"/>
<SubTexture name="bigPlayUp" x="2" y="2" width="90" height="90"/>

示例代码参数说明。

参数

说明

x

元件在图像中x轴坐标

y

元件在图像中y轴坐标

width

元件在图像中宽度

height

元件在图像中高度