depurador de vídeo

O depurador de vídeo é o controle deslizante horizontal que permite que um usuário procure dinamicamente qualquer posição de tempo no vídeo que está sendo reproduzido.

O 'botão' do depurador também se move à medida que o vídeo é reproduzido para indicar a posição atual do vídeo durante a reprodução. O depurador de vídeo sempre utiliza toda a largura da barra de controle. É possível esfolar o depurador de vídeo. altere sua altura e posição vertical, por CSS.

A aparência geral do depurador de vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber 
.s7interactivevideoviewer .s7videoscrubber .s7videotime 
.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriedades de CSS do depurador de vídeo

top	Posição a partir da borda superior, incluindo preenchimento.
bottom	Posição a partir da borda inferior, incluindo preenchimento.
altura	Altura do depurador de vídeo.
cor de fundo	A cor do depurador de vídeo.

Os seguintes seletores de classe CSS rastreiam os indicadores de plano de fundo, reprodução e carga:

.s7interactivevideoviewer .s7videoscrubber .s7track 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed

Propriedades de CSS da faixa

altura	Altura da faixa correspondente.
cor de fundo	A cor da faixa correspondente.

O seguinte seletor de classe CSS controla o botão:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriedades de CSS do botão

top	Deslocamento do botão vertical.
width	Largura do botão.
altura	Altura do botão.
background-image	Nódulo de arte.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites .

O seletor de classe CSS a seguir controla a bolha de tempo reproduzido:

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propriedades de CSS da bolha de tempo reproduzida

família de fontes	A família de fontes a ser usada para o texto de exibição de tempo.
font-size	O tamanho da fonte a ser usada para o texto de exibição de tempo.
cor	A cor da fonte a ser usada para o texto de exibição de tempo.
largura	Largura da área de bolha.
altura	Altura da área de bolha.
revestimento	Preenchimento da área de bolha.
background-image	Arte de bolha.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites .
alinhamento de texto	Alinhamento do texto com a área de bolha.

A dica de ferramenta do depurador de vídeo pode ser localizada. Consulte Localização de elementos da interface do usuário para obter mais informações.

Exemplo - Para configurar um visualizador de vídeo com um depurador de vídeo com cores de rastreamento personalizadas de 10 pixels de altura e posicionado 10 pixels e 35 pixels das bordas superior e esquerda da barra de controle.

.s7interactivevideoviewer .s7videoscrubber  { 
top:10px; 
left:35px; 
height:10px; 
background-color:#AAAAAA; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7track { 
height:10px; 
background-color:#444444; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded { 
height:10px; 
background-color:#666666; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed { 
height:10px; 
background-color:#888888; 
}

Quando a captação de vídeo é ativada com o parâmetro navigation, os locais do capítulo são exibidos como marcadores na parte superior da faixa do depurador de vídeo.

O marcador do capítulo de vídeo é controlado pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7navigation

Propriedades de CSS do marcador de capítulo de vídeo

largura	Largura do marcador do capítulo de vídeo.
altura	Altura do marcador do capítulo de vídeo.
background-image	Arte-final do marcador do capítulo de vídeo.
posição de fundo	Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites .

Exemplo - Para configurar um marcador de capítulo de vídeo com 5 x 8 pixels e que use arte diferente para os estados "padrão" e "sobre".

.s7interactivevideoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] { 
background-image: url("images/v2/VideoScrubberDiamond_over.png"); 
}

A bolha de capítulo do vídeo é posicionada sobre o marcador de capítulo do vídeo e mostra o título, a hora do start e a descrição de um determinado capítulo. É possível controlar a largura máxima da bolha e o deslocamento vertical em relação à faixa do depurador de vídeo. O restante é calculado automaticamente pelo componente.

A bolha de capítulo do vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter

Propriedades de CSS da bolha de capítulo do vídeo

largura máxima	Largura máxima da bolha de capítulo do vídeo.
bottom	Deslocamento vertical da faixa do depurador de vídeo.

Exemplo - Para configurar uma bolha de capítulo de vídeo com 235 pixels de largura e oito pixels acima na parte inferior da faixa do depurador de vídeo.

.s7interactivevideoviewer .s7videoscrubber .s7chapter { 
max-width:235px; 
bottom:8px; 
}

A bolha de capítulo do vídeo consiste em um cabeçalho e conteúdo opcionais. O cabeçalho tem o tempo de start do capítulo e o título do capítulo opcionais.

O cabeçalho é controlado pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

Propriedades de CSS do cabeçalho da bolha do capítulo do vídeo

altura	Altura do cabeçalho da bolha do capítulo do vídeo.
revestimento	Preenchimento interno para o texto do cabeçalho da bolha do capítulo do vídeo.
cor de fundo	Cor de fundo do cabeçalho da bolha do capítulo do vídeo.
altura da linha	Altura da linha de texto do cabeçalho da bolha do capítulo do vídeo.

Exemplo - Para configurar um cabeçalho de bolha de capítulo de vídeo com 22 pixels de altura, uma altura de linha de 22 pixels, uma margem horizontal de 12 pixels e um plano de fundo cinza.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header { 
height:22px; 
padding:0 12px; 
line-height:22px; 
background-color: rgba(51, 51, 51, 0.8); 
}

A hora de start do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propriedades de CSS da hora do start do capítulo do vídeo

cor	Cor do texto.
font-peso	Peso de fonte.
font-size	Tamanho da fonte.
família de fontes	Família de fontes.
preenchimento à direita	Preenchimento entre a hora do start e o título do capítulo.

Exemplo - Para configurar o tempo de start do capítulo usando a fonte Verdana cinza de dez pixels e tem dez pixels no preenchimento à direita.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime { 
color: #dddddd; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
padding-right: 10px; 
}

O título do capítulo do vídeo é controlado pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title

Propriedades de CSS do título do capítulo do vídeo

cor	Cor do texto do título do capítulo do vídeo.
font-peso	Peso de fonte do título do capítulo de vídeo.
font-size	Tamanho da fonte do título do capítulo do vídeo.
família de fontes	Família de fontes do título do capítulo de vídeo.

Exemplo - Para configurar um título de capítulo de vídeo que usa uma fonte Verdana branca, em negrito e dez pixels.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title { 
color: #ffffff; 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 10px; 
font-weight: bold; 
}

A descrição do capítulo do vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

Propriedades de CSS da descrição do capítulo do vídeo

cor	Cor do texto da descrição do capítulo do vídeo.
cor de fundo	Cor de fundo da descrição do capítulo do vídeo.
font-peso	Peso de fonte de descrição do capítulo do vídeo.
font-size	Tamanho da fonte da descrição do capítulo do vídeo.
família de fontes	Família de fontes de descrição do capítulo do vídeo.
altura da linha	Altura da linha de descrição do capítulo do vídeo.
revestimento	Preenchimento interno da descrição do capítulo do vídeo.

Exemplo - Para configurar a descrição do capítulo do vídeo usando uma fonte Verdana cinza escuro, de 11 pixels, com um fundo cinza claro; Altura de linha de 5 pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de 9 pixels.

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description { 
color: #333333; 
background-color: rgba(221, 221, 221, 0.9); 
font-family: Verdana,Arial,Helvetica,sans-serif; 
font-size: 11px; 
line-height: 15px; 
padding: 12px 12px 9px; 
}

O conector de cunha na parte inferior da bolha de capítulo é controlado pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail

Propriedades de CSS do conector de tecelagem

cor da borda	Cor do conector da borda. Definido como <color> transparente para que somente a cor da borda superior seja definida e as bordas restantes fiquem transparentes.
largura da borda	Largura do conector da borda. Definido como <width> <width> 0 para que a mesma largura seja definida somente para as bordas superior e horizontal e a largura da borda inferior seja 0 .
margem	Define apenas uma margem inferior negativa. Deve ter o mesmo valor que border-width .

Exemplo - Para configurar um conector de cunha cinza de seis pixels:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail { 
border-color: rgba(221, 221, 221, 0.9) transparent transparent; 
border-width: 6px 6px 0; 
margin: 0 0 0 -6px; 
}