O painel de amostras interativas será exibido ao lado do conteúdo do vídeo se os dados interativos tiverem sido passados para o visualizador na configuração. Ele consiste em um banner na parte superior que renderiza texto, como "Clique para exibir", uma coluna de uma ou mais amostras interativas e dois botões de rolagem (disponíveis apenas em sistemas desktop).
Em sistemas desktop e em dispositivos de toque, na orientação paisagem, as amostras interativas são renderizadas verticalmente à direita do conteúdo de vídeo. Em dispositivos de toque com orientação de retrato, eles são exibidos na parte inferior do visualizador como uma linha horizontal de amostras.
O seletor de classe CSS a seguir controla o local e a orientação do painel de amostras interativo:
.s7interactivevideoviewer .s7interactiveswatches
largura |
Largura do painel de amostras interativo |
altura |
Altura do painel de amostras interativo. |
top |
Posição superior do painel de amostras interativo. |
bottom |
Posição inferior do painel interativo de amostras. |
left |
Posição esquerda do painel interativo de amostras. |
direita |
Posição direita do painel interativo de amostras. |
O local e a orientação do tempo de execução do painel de amostras interativo são definidos por uma combinação das propriedades CSS acima, da seguinte maneira:
É possível usar marcadores CSS com esse estilo para obter a colocação adaptável do painel de amostras interativo.
Para configurar um painel de amostras interativo para renderizar horizontalmente na parte inferior do visualizador em dispositivos de toque na orientação paisagem. E para mostrá-lo verticalmente à direita do conteúdo de vídeo em todos os outros casos:
.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7interactiveswatches,
.s7interactivevideoviewer.s7mouseinput .s7interactiveswatches {
width:120px;
height:auto;
right:0px;
top:0px;
left:auto;
bottom:auto;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7interactiveswatches {
width:auto;
height:136px;
right:auto;
top:auto;
left:0px;
bottom:0px;
}
O tamanho e a posição do banner são gerenciados pelo componente interativo de amostras com base em outro estilo aplicado com CSS e não podem ser definidos explicitamente.
O seletor de classe CSS a seguir controla a aparência do painel de banner:
.s7interactivevideoviewer .s7interactiveswatches .s7banner
background-color |
Cor de fundo do painel Banner. |
cor |
Cor do texto dentro do painel Banner. |
borda |
Borda ao redor do painel banner. |
font-weight |
A espessura da fonte a ser usada para o texto dentro do painel banner. |
font-size |
O tamanho da fonte a ser usada para o texto dentro do painel Banner. |
font-family |
A família da fonte a ser usada para o texto dentro do painel banner. |
font-align |
O alinhamento da fonte a ser usada para o texto dentro do painel Banner. |
A dica de ferramenta do banner pode ser localizada. Consulte Localização dos elementos da interface do usuário para obter mais informações.
Para configurar um banner com plano de fundo cinza escuro, borda de dois pixels cinza claro e texto branco centralizado horizontalmente:
.s7interactivevideoviewer .s7interactiveswatches .s7banner {
background-color: #222222;
border-bottom: 2px solid #444444;
color: #ffffff;
text-align: center;
}
O seletor de classe CSS a seguir controla a aparência das amostras:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches
background-color |
Cor do plano de fundo da área de amostras. |
Para configurar a área de amostras com plano de fundo cinza escuro:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches {
background-color: #222222;
}
O seletor de classe CSS a seguir controla o espaçamento entre as miniaturas de amostra:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell
margem |
O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento real da miniatura é igual à soma das margens esquerda e direita definidas para .s7thumbcell . |
Para configurar o espaçamento vertical como dez pixels:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell {
margin: 5px;
}
O seletor de classe CSS a seguir controla a aparência de miniaturas individuais:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb
largura |
Largura da miniatura. |
altura |
Altura da miniatura. |
borda |
Borda da miniatura. |
A miniatura suporta o state
seletor de atributos, que você pode usar para aplicar capas diferentes a estados de miniatura diferentes. Em especial, state="selected"
corresponde à miniatura da imagem atualmente selecionada; state="default"
corresponde ao restante das miniaturas; state="over"
é usado ao passar o mouse.
Para configurar miniaturas com 100 x 75 pixels:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb {
width:100px;
height:75px;
}
O seletor de classe CSS a seguir controla a aparência do rótulo da miniatura:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label
cor |
Cor do texto. |
borda |
Borda do rótulo. |
text-align |
Alinhamento de texto horizontal. |
font-family |
Nome da fonte. |
Para configurar rótulos para usar branco, alinhado à esquerda, 12 pixels, em fonte Helvetica® e uma borda inferior:
.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label {
border-bottom: 1px solid #e9e9e9;
text-align: left;
color: #ffffff;
font-family: Helvetica,sans-serif;
font-size: 12px;
}
O seletor de classe CSS a seguir controla a aparência dos botões de rolagem para cima e para baixo:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton
.s7interactivevideoviewer .s7interactiveswatches .s7scrolldownbutton
Não é possível posicionar os botões de rolagem usando CSS top
, left
, bottom
, e right
propriedades; em vez disso, a lógica do visualizador as posiciona automaticamente.
largura |
Largura do botão de rolagem. |
altura |
Altura do botão de rolagem. |
background-image |
A imagem exibida para um determinado estado de botão. |
background-position |
A posição dentro da imagem do trabalho artístico, se as imagens CSS forem usadas. Consulte também Sprites CSS . |
Esse botão oferece suporte ao state
o seletor de atributos, que você pode usar para aplicar capas diferentes aos estados do botão: " up
", " down
", " over
", e " disabled
".
As dicas de ferramentas do botão podem ser localizadas. Consulte Localização dos elementos da interface do usuário para obter mais informações.
Para configurar um botão de rolagem para cima com 60 x 36 pixels, tenha um trabalho artístico diferente para cada estado e o tire da imagem gráfica do componente:
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton {
background-size: 120px;
width: 60px;
height: 36px;
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state] {
background-image: url(images/v2/InteractiveSwatches_light_sprite.png);
}
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='up'] { background-position: -60px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='over'] { background-position: -0px -684px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='down'] { background-position: -60px -648px; }
.s7interactivevideoviewer .s7interactiveswatches .s7scrollupbutton[state='disabled'] { background-position: -0px -648px; }