Borracha 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 de tempo atual do vídeo durante a reprodução. O depurador de vídeo sempre pega a largura total da barra de controle. É possível usar a capa do 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:

.s7videoviewer .s7videoscrubber 
.s7videoviewer .s7videoscrubber .s7videotime 
.s7videoviewer .s7videoscrubber .s7knob

Propriedades CSS do depurador de vídeo

top

Posição a partir da borda superior, incluindo o preenchimento.

bottom

Posição a partir da borda inferior, incluindo o preenchimento.

altura

Altura do depurador de vídeo.

cor do fundo

A cor do depurador de vídeo.

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

.s7videoviewer .s7videoscrubber .s7track 
.s7videoviewer .s7videoscrubber .s7trackloaded 
.s7videoviewer .s7videoscrubber .s7trackplayed

Propriedades CSS da faixa

altura

Altura da via correspondente.

cor do fundo

A cor da faixa correspondente.

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

.s7videoviewer .s7videoscrubber .s7knob

Propriedades CSS do botão

top

Deslocamento do botão vertical.

width

Largura do botão.

altura

Altura do botão.

imagem de fundo

Arte do botão.

posição de fundo

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

Consulte Sprites CSS .

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

.s7videoviewer .s7videoscrubber .s7videotime

Propriedades CSS da bolha de tempo de reprodução

família de fontes

A família de fontes a ser usada para o texto de exibição de tempo.

tamanho da fonte

O tamanho da fonte a ser usado para o texto de exibição de tempo.

color

A cor da fonte a ser usada para o texto de exibição de tempo.

largura

Largura da área da bolha.

altura

Altura da área da bolha.

preenchimento

Preenchimento da área da bolha.

imagem de fundo

Arte em bolha.

posição de fundo

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

Consulte Sprites CSS .

alinhamento de texto

Alinhamento do texto com a área da bolha.

A dica de ferramenta do depurador de vídeo pode ser localizada. Consulte Localização dos 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 com 10 pixels de altura e posicionado 10 pixels e 35 pixels das bordas superior e esquerda da barra de controle.

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

Quando o capítulo do vídeo é ativado 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 de capítulo de vídeo é controlado pelo seguinte seletor de classe CSS:

 .s7videoviewer .s7videoscrubber .s7navigation

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

largura

Largura do marcador do capítulo de vídeo.

altura

Altura do marcador do capítulo de vídeo.

imagem de fundo

Arte do marcador de capítulo de vídeo.

posição de fundo

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

Consulte Sprites CSS .

OBSERVAÇÃO

Esse botão suporta o seletor de atributos state, que pode ser usado para aplicar capas diferentes a estados de botão diferentes. 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 mouse sobre ou toque.

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".

.s7videoviewer .s7videoscrubber .s7navigation { 
width:5px; 
height:8px; 
} 
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] { 
background-image: url("images/v2/VideoScrubberDiamond.png"); 
} 
.s7videoviewer .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 de início 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 do capítulo do vídeo é controlada pelo seguinte seletor de classe CSS:

.s7videoviewer .s7videoscrubber .s7chapter

Propriedades 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 do rastreamento do depurador de vídeo.

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

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

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

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header

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

altura

Altura do cabeçalho da bolha de capítulo do vídeo.

preenchimento

Preenchimento interno para o texto do cabeçalho da bolha de capítulo do vídeo.

cor do fundo

Cor do fundo do cabeçalho da bolha do capítulo de vídeo.

altura da linha

Altura da linha de texto do cabeçalho da bolha do capítulo de vídeo.

Exemplo - Para configurar um cabeçalho de bolha de capítulo do 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.

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

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

Propriedades CSS da hora de início do capítulo do vídeo

color

Cor do texto.

font-weight

Espessura da fonte.

tamanho da fonte

Tamanho da fonte.

família de fontes

Família de fontes.

preenchimento à direita

Preenchimento entre a hora de início e o título do capítulo.

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

.s7videoviewer .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:

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

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

color

Cor do texto do título do capítulo do vídeo.

font-weight

Peso da fonte do título do capítulo do vídeo.

tamanho da fonte

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 do vídeo.

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

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

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

color

Cor do texto da descrição do capítulo do vídeo.

cor do fundo

Cor de fundo da descrição do capítulo do vídeo.

font-weight

Peso da fonte da descrição do capítulo do vídeo.

tamanho da fonte

Tamanho da fonte da descrição do capítulo do vídeo.

família de fontes

Família de fontes da descrição do capítulo do vídeo.

altura da linha

Altura da linha de descrição do capítulo do vídeo.

preenchimento

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 cinza escuro, Verdana de 11 pixels, com um fundo cinza claro; Altura da linha de 5 pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de 9 pixels.

.s7videoviewer .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:

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

Propriedades CSS do conector de cunha

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 sejam deixadas transparentes.

largura da borda

Largura do conector da borda.

Definido como <width> <width> 0 de forma que a mesma largura seja definida somente para as bordas superior e horizontal e a largura da borda inferior seja 0 .

margem

Define somente uma margem inferior negativa. Ele deve ter o mesmo valor que border-width .

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

.s7videoviewer .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