This topic describes how to configure the player skin in AliPlayer.
Configure the skin for an HTML5 player
Reference the CSS file that defines the default layout.
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK version}/skins/default/aliplayer-min.css" />The CSS file contains skin materials: http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png.
Configure all internal components. The following table describes the components that you can configure.
Component | Description |
Component | Description |
prism-player | Player configuration |
prism-big-play-btn | Large play button |
prism-play-btn | Play button |
prism-play-btn.playing | Pause button that is used during playback |
prism-live-display | Live streaming button that occupies the position of play button during live streaming |
prism-fullscreen-btn | Full screen button |
prism-fullscreen-btn.fullscreen | Full screen button after it is clicked |
prism-volume | Volume button |
prism-volume.mute | Volume button after the mute mode is enabled |
prism-cover | Thumbnail configuration before playback |
prism-controlbar | Control bar of the player |
prism-time-display | Total duration |
prism-time-display .current-time | Current time |
prism-progress | Progress bar |
prism-progress-loaded | Loading progress |
prism-progress-cursor | Position of the progress bar |
prism-speed-selector | Configure the playback speed |
prism-stream-selector | Resolution switching |
prism-snapshot-btn | Snapshot button |
prism-ErrorMessage | Error message |
prism-info-display | Additional information about an error |
Configuration method
For more information, see the CSS file of the player: aliplayer-min.css.
The following sample code shows how to configure a large play button:
.prism-player .prism-big-play-btn {
width: 90px;
height: 90px;
background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}
Parameter | Description |
Parameter | Description |
width | The width of the large play button. Unit: pixel. |
height | The height of the large play button. Unit: pixel. |
background | The image URL of the large play button. |
no-repeat | Specifies not to tile the image. CSS also supports the no-repeat parameter. |
-2px | The x and y coordinates of the large play button. |
