Esse botão ativa e desativa a exibição da legenda fechada. Não é visível se o parâmetro da legenda não for especificado.
É possível dimensionar, usar a capa e posicionar esse botão em relação à barra de controle que o contém, usando o CSS.
A aparência desse botão é controlada com o seguinte seletor de classe CSS:
.s7smartcropvideoviewer .s7closedcaptionbutton
Propriedades CSS do botão de legenda
top |
Posição a partir da borda superior, incluindo o preenchimento. |
right |
Posição a partir da borda direita, incluindo o preenchimento. |
left |
Posição a partir da borda esquerda, incluindo o preenchimento. |
bottom |
Posição a partir da borda inferior, incluindo o preenchimento. |
width |
A largura do botão de tela cheia. |
altura |
A altura do botão de tela cheia. |
imagem de fundo |
A imagem exibida para um determinado estado de botão. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS . |
Esse botão suporta state
e selected
seletores de atributos, que podem ser usados para aplicar capas diferentes a estados de botão diferentes. Em especial, selected='true'
corresponde ao estado quando as legendas estão visíveis e selected='false'
é usada quando as legendas estão ocultas.
A dica de ferramenta do botão pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.
Para configurar um botão de legenda fechada com 28 x 28 pixels. Ele é posicionado em quatro pixels da parte superior e em 68 pixels da borda direita da barra de controle. E, por fim, exibe uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não selecionado.
.s7smartcropvideoviewer .s7closedcaptionbutton {
position:absolute;
top:4px;
right:68px;
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_up.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='up'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='over'] {
background-image:url(images/v2/ClosedCaptionButton_over.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='down'] {
background-image:url(images/v2/ClosedCaptionButton_down.png);
}
.s7smartcropvideoviewer .s7closedcaptionbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ClosedCaptionButton_disabled.png);
}