botão de tela cheia
Criado para:
- Desenvolvedor
- Usuário
O botão de tela cheia faz com que o reprodutor de vídeo entre ou saia do modo de tela cheia quando um usuário clica nele.
Você pode dimensionar, aplicar capa e posicionar o botão de tela cheia, relativo à barra de controle que o contém, por CSS.
A aparência do botão de tela cheia é controlada com o seletor de classe CSS:
.s7interactivevideoviewer .s7fullscreenbutton
Propriedades CSS do botão de tela cheia
top | Posição a partir da borda superior, incluindo o preenchimento. |
direita | Posição a partir da borda direita, incluindo o preenchimento. |
saiu de | Posição a partir da borda esquerda, incluindo o preenchimento. |
inferior | Posição a partir da borda inferior, incluindo o preenchimento. |
largura | 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. |
background-position |
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas. Consulte Sprites CSS. |
state
e selected
, que podem ser usados para aplicar capas diferentes a estados de botão diferentes. Especificamente, selected='true'
corresponde ao estado “tela cheia” e selected='false'
corresponde ao estado “normal”.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.
Exemplo
Para configurar um botão de tela cheia com 32 x 32 pixels e posicionado a 6 pixels da borda superior e direita da barra de controle. Além disso, exiba uma imagem diferente para cada um dos quatro estados de botão diferentes quando selecionado ou não.
.s7interactivevideoviewer . s7fullscreenbutton {
top:6px;
right:6px;
width:32px;
height:32px;
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='up'] {
background-image:url(images/enterFullBtn_up.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='over'] {
background-image:url(images/enterFullBtn_over.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='down'] {
background-image:url(images/enterFullBtn_down.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='false'][state='disabled'] {
background-image:url(images/enterFullBtn_disabled.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='up'] {
background-image:url(images/exitFullBtn_up.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='over'] {
background-image:url(images/exitFullBtn_over.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='down'] {
background-image:url(images/exitFullBtn_down.png);
}
.s7interactivevideoviewer .s7fullscreenbutton [selected='true'][state='disabled'] {
background-image:url(images/exitFullBtn_disabled.png); }
}