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:

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

Propriedades de CSS do depurador de vídeo

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

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

Propriedades de CSS da faixa

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

.s7videoviewer .s7videoscrubber .s7knob

Propriedades de CSS do botão

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

.s7videoviewer .s7videoscrubber .s7videotime

Propriedades de CSS da bolha de tempo reproduzida

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.

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

 .s7videoviewer .s7videoscrubber .s7navigation

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

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

.s7videoviewer .s7videoscrubber .s7chapter

Propriedades de CSS da bolha de capítulo do 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.

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

.s7videoviewer .s7videoscrubber .s7chapter .s7header

Propriedades de CSS 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.

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

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

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.

.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 de CSS do título do capítulo do 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.

.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 de CSS 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.

.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 de CSS do conector de tecelagem

Exemplo - Para configurar um conector de cunha cinza 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; 
}