Amostras interativas

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

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

Propriedades CSS das amostras interativas

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:

  • Para renderizar as amostras interativas horizontalmente na parte inferior do visualizador, defina a altura como um valor de pixel absoluto; esquerda e inferior como 0px; largura, direita e superior como auto.
  • Para renderizar as amostras interativas verticalmente à direita do conteúdo do vídeo, defina a largura como um pixel absoluto; à direita e acima como 0px; à altura, à esquerda e abaixo como auto.

É possível usar marcadores CSS com esse estilo para obter a colocação adaptável do painel de amostras interativo.

Exemplo

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

Propriedades CSS do painel Banner

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.

Exemplo

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

Propriedades CSS da área de amostras

background-color

Cor do plano de fundo da área de amostras.

Exemplo

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

Propriedades CSS do espaçamento da miniatura das amostras

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 .

Exemplo

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

Propriedades CSS da aparência de miniaturas individuais

largura

Largura da miniatura.

altura

Altura da miniatura.

borda

Borda da miniatura.

OBSERVAÇÃO

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.

Exemplo

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

Propriedades CSS da aparência do rótulo de miniatura

cor

Cor do texto.

borda

Borda do rótulo.

text-align

Alinhamento de texto horizontal.

font-family

Nome da fonte.

Exemplo

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.

Propriedades CSS da aparência dos botões de rolagem para cima e para baixo

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 .

OBSERVAÇÃO

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.

Exemplo

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; }

Nesta página