369      阿里云

Web播放器皮肤定制__视频播放_使用手册_媒体转码-阿里云

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

1. HTML5播放器皮肤设置

（1）默认设置，页面引入文件：

<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/1.4.8/skins/default/index.css" />

css文件中包含皮肤素材：

https://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png

（2）配置信息：内部组件都要有配置；

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           ：进度条位置

（3）配置方式

可以参照https://g.alicdn.com/de/prismplayer/1.4.8/skins/default/index.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轴位置

2. Flash播放器皮肤设置

（1）默认使用文件：

https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/defaultSkin.xml
https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/defaultSkin.png

其中.png为皮肤按钮素材，.xml指定皮肤按钮位置，1.2.3为版本号。播放器默认在https://g.alicdn.com/de/prismplayer-flash/1.2.3/atlas/目录下查找defaultSkin.xml与defaultSkin.png。

（2）配置信息：

设定元件素材图像：

<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%比例按钮 未点击时图标

（3）配置方式

参照默认皮肤设置，在https://[domain]/[path]/目录下存放skin.png与skin.xml文件，并在player的输入参数中添加skinRes："https://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：元件在图像中宽度

最后更新：2016-11-24 11:23:49

  上一篇： Web播放器__视频播放_使用手册_媒体转码-阿里云

  下一篇： 移动端播放器SDK__视频播放_使用手册_媒体转码-阿里云