全部产品
云市场

如何使用皮肤

更新时间:2019-09-16 19:42:33

Aliplayer皮肤设置分为Flash模式与HTML5模式。

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轴位置
-2px: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:元件在图像中宽度