设置播放器皮肤

更新时间:2025-01-24 06:18:14

通过阅读本文,了解如何设置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播放器皮肤设置
AI助理

点击开启售前

在线咨询服务

你好,我是AI助理

可以解答问题、推荐解决方案等