全部产品
Search
文档中心

:设置播放器皮肤

更新时间:Jul 24, 2023

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

HTML5播放器皮肤设置

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

<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK版本号}/skins/default/aliplayer-min.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

加载进度

prism-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

元件在图像中高度