通过阅读本文,了解如何设置Aliplayer播放器皮肤。
H5播放器皮肤设置
默认设置:页面引入文件。
<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轴位置 |
- 本页导读 (1)
- H5播放器皮肤设置