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 .

OBSERVAÇÃO

Este botão suporta o seletor de atributos state, que você pode usar para aplicar diferentes capas a diferentes estados de botão. Especificamente, selected='default' corresponde ao estado padrão do marcador do capítulo de vídeo e selected='over' é usado quando o marcador do capítulo de vídeo é ativado por um gesto de toque ou sobre o mouse.

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

Nesta página