Configure the player skin

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
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
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.