Amostras interativas

O painel de amostras interativas é 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 de desktop).

Em sistemas de desktop e 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 na orientação retrato, eles aparecem na parte inferior do visualizador, como uma linha horizontal de amostras.

O seguinte seletor de classe CSS controla o local e a orientação do painel de amostras interativas:

.s7interactivevideoviewer .s7interactiveswatches

Propriedades CSS das amostras interativas

width

Largura do painel de amostras interativas

altura

Altura do painel Amostras interativas.

top

Posição superior do painel Amostras interativas.

bottom

Posição inferior do painel Amostras interativas.

left

Posição esquerda do painel Amostras interativas.

right

Posição direita do painel de amostras interativas.

O local e a orientação do tempo de execução do painel de amostras interativas são definidos por uma combinação das propriedades de CSS acima, da seguinte maneira:

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

É possível usar marcadores CSS em conjunto com esse estilo para obter o posicionamento adaptável do painel de amostras interativas.

Exemplo

Para configurar um painel de amostras interativas para renderizar horizontalmente na parte inferior do visualizador em dispositivos de toque na orientação paisagem e mostrar 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 de amostras interativas com base em outro estilo aplicado com CSS e não podem ser definidos explicitamente.

O seguinte seletor de classe CSS controla a aparência do painel do banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propriedades CSS do painel do banner

cor do fundo

Cor do plano de fundo do painel do banner.

color

Cor do texto dentro do painel do banner.

border

Borda em torno do painel do banner.

font-weight

O peso da fonte a ser usado para o texto dentro do painel do banner.

tamanho da fonte

O tamanho da fonte a ser usado para o texto dentro do painel do banner.

família de fontes

A família de fontes a ser usada para o texto dentro do painel do banner.

alinhamento de fonte

O alinhamento da fonte a ser usado para o texto dentro do painel do 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 fundo cinza escuro, cinza claro, com duas bordas de pixel e o texto branco centrado horizontalmente:

.s7interactivevideoviewer .s7interactiveswatches .s7banner { 
    background-color: #222222; 
    border-bottom: 2px solid #444444; 
    color: #ffffff; 
    text-align: center; 
}

O seguinte seletor de classe CSS controla a aparência das amostras:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches

Propriedades CSS da área de amostras

cor do fundo

Cor do plano de fundo da área de amostras.

Exemplo

Para configurar a área de amostras com fundo cinza escuro:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches { 
    background-color: #222222; 
}

O seguinte seletor de classe CSS controla o espaçamento entre miniaturas de amostra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propriedades CSS do espaçamento de miniatura das amostras

margem

O tamanho da margem horizontal e vertical ao redor de cada miniatura. O espaçamento de miniatura real é igual à soma da margem esquerda e direita definida para .s7thumbcell .

Exemplo

Para configurar o espaçamento vertical para ter 10 pixels:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell { 
 margin: 5px; 
}

O seguinte seletor de classe CSS 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.

border

Borda da miniatura.

OBSERVAÇÃO

A miniatura é compatível com o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de miniatura diferentes. Em particular, state="selected" corresponde à miniatura da imagem selecionada no momento; state="default" corresponde ao resto das miniaturas; state="over" é usado com o mouse.

Exemplo

Para configurar miniaturas com 100 x 75 pixels:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumb { 
 width:100px; 
 height:75px; 
}

O seguinte seletor de classe CSS controla a aparência do rótulo de miniatura:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7label

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

color

Cor do texto.

border

Borda do rótulo.

alinhamento de texto

Alinhamento horizontal do texto.

família de fontes

Nome da fonte.

Exemplo

Para configurar rótulos para usar o alinhamento à esquerda, o branco, 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 seguinte seletor de classe CSS 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 as propriedades CSS top, left, bottom e right; em vez disso, a lógica do visualizador os 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.

imagem de fundo

A imagem exibida para um determinado estado de botão.

posição de fundo

A posição dentro da estrutura de arte, se os sprites CSS forem usados.

Consulte também Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado 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 o botão de rolagem para cima que tem 60 x 36 pixels, tenha uma arte-final diferente para cada estado e retire essa arte da imagem de sprite 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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now