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 Visualização", uma coluna de uma ou mais amostras interativas e dois botões de rolagem (disponíveis somente 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 seletor de classe CSS a seguir controla o local e a orientação do painel de amostras interativas:

.s7interactivevideoviewer .s7interactiveswatches

Propriedades de CSS das amostras interativas

width

Largura do painel de amostras interativas

altura

Altura do painel de amostras interativas.

top

Posição superior do painel de amostras interativas.

bottom

Posição inferior do painel de amostras interativas.

left

Posição esquerda do painel de 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 CSS acima, da seguinte forma:

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

É possível usar marcadores CSS em conjunto com esse estilo para obter uma posição 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 para 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 seletor de classe CSS a seguir controla a aparência do painel do banner:

.s7interactivevideoviewer .s7interactiveswatches .s7banner

Propriedades de CSS do painel de banner

cor de fundo

Cor do plano de fundo do painel do banner.

cor

Cor do texto no painel do banner.

fronteira

Borda em torno do painel do banner.

font-peso

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

font-size

O tamanho da fonte a ser usada para o texto no painel do banner.

família de fontes

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

font-alignment

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 de elementos da interface do usuário para obter mais informações.

Exemplo

Para configurar um banner com plano de fundo cinza escuro, cinza mais claro, duas bordas de pixel e o texto branco centralizados 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 de CSS da área de amostras

cor de 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 seletor de classe CSS a seguir controla o espaçamento entre miniaturas de amostra:

.s7interactivevideoviewer .s7interactiveswatches .s7swatches .s7thumbcell

Propriedades CSS do espaçamento de miniaturas das amostras

margem

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

Exemplo

Para configurar o espaçamento vertical para que seja de 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.

fronteira

Borda da miniatura.

OBSERVAÇÃO

A miniatura suporta o seletor de atributos state, que você pode usar para aplicar diferentes capas a diferentes estados de miniaturas. Em particular, state="selected" corresponde à miniatura da imagem atualmente selecionada; state="default" corresponde ao resto das miniaturas; state="over" é usado ao passar o mouse.

Exemplo

Para configurar miniaturas de 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.

fronteira

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 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 as propriedades CSS top, left, bottom e right; em vez disso, a lógica do visualizador os posiciona automaticamente.

Propriedades de 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 que é exibida para um determinado estado de botão.

posição de fundo

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

Consulte também CSS Sprites .

OBSERVAÇÃO

Este botão suporta o seletor de atributos state, que pode ser usado para aplicar diferentes capas aos estados do botão: " up", " down", " over" e " disabled".

As dicas de ferramentas do botão podem ser localizadas. Consulte Localização de elementos da interface do usuário para obter mais informações.

Exemplo

Para configurar o botão de rolagem para cima com 60 x 36 pixels, tenha uma arte-final diferente para cada estado e retire essa arte-final da imagem 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