Amostras interativas

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

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

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

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

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

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

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

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

Recursos do Business.Adobe.com

Content Intelligence Embedded Charts Document Generation Managed Cloud Web Content Management Digital Signage