Este tópico descreve como configurar a skin do player no AliPlayer.
Configurar a skin para um player HTML5
Referencie o arquivo CSS que define o layout padrão.
<link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/{SDK version}/skins/default/aliplayer-min.css" />O arquivo CSS contém os materiais da skin: http://gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png.
Configure todos os componentes internos. A tabela a seguir lista os componentes configuráveis.
|
Componente |
Descrição |
|
prism-player |
Configuração do player |
|
prism-big-play-btn |
Botão de reprodução grande |
|
prism-play-btn |
Botão de reprodução |
|
prism-play-btn.playing |
Botão de pausa usado durante a reprodução |
|
prism-live-display |
Botão de transmissão ao vivo que substitui o botão de reprodução durante streams ao vivo |
|
prism-fullscreen-btn |
Botão de tela cheia |
|
prism-fullscreen-btn.fullscreen |
Botão de tela cheia após o clique |
|
prism-volume |
Botão de volume |
|
prism-volume.mute |
Botão de volume com o modo mudo ativado |
|
prism-cover |
Configuração da miniatura antes da reprodução |
|
prism-controlbar |
Barra de controle do player |
|
prism-time-display |
Duração total |
|
prism-time-display .current-time |
Tempo atual |
|
prism-progress |
Barra de progresso |
|
prism-progress-loaded |
Progresso do carregamento |
|
prism-progress-cursor |
Posição na barra de progresso |
|
prism-speed-selector |
Configuração da velocidade de reprodução |
|
prism-stream-selector |
Troca de resolução |
|
prism-snapshot-btn |
Botão de snapshot |
|
prism-ErrorMessage |
Mensagem de erro |
|
prism-info-display |
Informações adicionais sobre um erro |
Método de configuração
Para obter mais informações, consulte o arquivo CSS do player: aliplayer-min.css.
O exemplo de código a seguir mostra como configurar o botão de reprodução grande:
.prism-player .prism-big-play-btn {
width: 90px;
height: 90px;
background: url("//gw.alicdn.com/tps/TB1YuE3KFXXXXaAXFXXXXXXXXXX-256-512.png") no-repeat -2px -2px;
}|
Parâmetro |
Descrição |
|
width |
Largura do botão de reprodução grande. Unidade: pixel. |
|
height |
Altura do botão de reprodução grande. Unidade: pixel. |
|
background |
URL da imagem do botão de reprodução grande. |
|
no-repeat |
Define que a imagem não deve ser repetida em mosaico. O CSS também aceita o parâmetro no-repeat. |
|
-2px |
Coordenadas x e y do botão de reprodução grande. |