全部产品
媒体转码

Web播放器皮肤定制

更新时间:2017-09-22 15:25:20   分享:   

Aliplayer皮肤设置

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

1. HTML5播放器皮肤设置

(1)默认设置,页面引入文件:

  1. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer.css" />

css文件中包含皮肤素材:

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

(2)配置信息:内部组件都要有配置;

  1. prism-player :播放器配置
  2. prism-big-play-btn :大播放按钮:
  3. prism-play-btn :播放按钮
  4. prism-play-btn.playing :播放过程中暂停;
  5. prism-live-display :直播图标(直播时会占用播放按钮位置)
  6. prism-fullscreen-btn :全屏按钮
  7. prism-fullscreen-btn.fullscreen :全屏后按钮
  8. prism-volume :声音按钮
  9. prism-volume.mute :静音后按钮
  10. prism-cover :播放器开始前封面配置
  11. prism-controlbar :播放器控制栏
  12. prism-time-display :时间显示总时间
  13. prism-time-display .current-time:当前时间
  14. prism-progress :进度条
  15. prism-progress-loaded :加载进度
  16. prism-progress-cursor :进度条位置

(3)配置方式

可以参照http://g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer.css修改配置,并在页面中引入替换。

例如:大播放按钮

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

其中:

  1. width:宽度(px:像素)
  2. height:高度(px:像素)
  3. background:图像url
  4. no-repeat:不平铺(同css
  5. -2pxx轴位置
  6. -2pxy轴位置

2. Flash播放器皮肤设置

(1)默认使用文件:

  1. http://g.alicdn.com/de/prismplayer-flash/1.5.7/atlas/defaultSkin.xml
  2. http://g.alicdn.com/de/prismplayer-flash/1.5.7/atlas/defaultSkin.png

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

(2)配置信息:

设定元件素材图像:

  1. <TextureAtlas imagePath="defaultSkin.png">

设定元件:

  1. bigPlayDown :大播放按钮 点击后图标
  2. bigPlayOver :大播放按钮 鼠标划过时图标
  3. bigPlayUp :大播放按钮 未点击时图标
  4. clarityBgDown :清晰度标示 点击后图标
  5. clarityBgOver :清晰度标示 鼠标划过时图标
  6. clarityBgUp :清晰度标示 未点击时图标
  7. followDisabled :下一条按钮 禁止时图标
  8. followDown :下一条按钮 点击后图标
  9. followOver :下一条按钮 鼠标划过时图标
  10. followUp :下一条按钮 未点击时图标
  11. fullScreenDisabled:全屏按钮 禁止时图标
  12. fullScreenDown :全屏按钮 点击后图标
  13. fullScreenOver :全屏按钮 鼠标划过时图标
  14. fullScreenUp :全屏按钮 未点击时图标
  15. liveicon :直播标志图片
  16. muteDown :静音按钮 点击后图标
  17. muteOver :静音按钮 鼠标划过时图标
  18. muteUp :静音按钮 未点击时图标
  19. normalScreenDown :退出全屏按钮 点击后图标
  20. normalScreenOver :退出全屏按钮 鼠标划过时图标
  21. normalScreenUp :退出全屏按钮 未点击时图标
  22. pauseDisabled :暂停按钮 禁止时图标
  23. pauseDown :暂停按钮 点击后图标
  24. pauseOver :暂停按钮 鼠标划过时图标
  25. pauseUp :暂停按钮 未点击时图标
  26. playDisabled :播放按钮 禁止时图标
  27. playDown :播放按钮 点击后图标
  28. playOver :播放按钮 鼠标划过时图标
  29. playUp :播放按钮 未点击时图标
  30. replayDown :重播按钮 点击后图标
  31. replayOver :重播按钮 鼠标划过时图标
  32. replayUp :重播按钮 未点击时图标
  33. setDown :设置按钮 点击后图标
  34. setOver :设置按钮 鼠标划过时图标
  35. setUp :设置按钮 未点击时图标
  36. volMaxDown :大声音(>=50%) 点击后图标
  37. volMaxOver :大声音(>=50%) 鼠标划过时图标
  38. volMaxUp :大声音(>=50%) 未点击时图标
  39. volMinDown :小声音(<50%) 点击后图标
  40. volMinOver :小声音(<50%) 鼠标划过时图标
  41. volMinUp :小声音(<50%) 未点击时图标
  42. zoom100Down :全屏时100%比例按钮 点击后图标
  43. zoom100Over :全屏时100%比例按钮 鼠标划过时图标
  44. zoom100Up :全屏时100%比例按钮 未点击时图标
  45. zoom75Down :全屏时75%比例按钮 点击后图标
  46. zoom75Over :全屏时75%比例按钮 鼠标划过时图标
  47. zoom75Up :全屏时75%比例按钮 未点击时图标
  48. zoom50Down :全屏时50%比例按钮 点击后图标
  49. zoom50Over :全屏时50%比例按钮 鼠标划过时图标
  50. zoom50Up :全屏时50%比例按钮 未点击时图标

(3)配置方式

参照默认皮肤设置,在http://[domain]/[path]/目录下存放skin.pngskin.xml文件,并在player的输入参数中添加skinRes:"http://domain/path/skin"。例如:大播放按钮

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

其中:

  1. x:元件在图像中x轴坐标
  2. y:元件在图像中y轴坐标
  3. width:元件在图像中宽度
  4. height:元件在图像中宽度
本文导读目录
本文导读目录
以上内容是否对您有帮助?