Vídeo de depuração

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 aplicar a capa do depurador de vídeo e alterar 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 CSS do depurador de vídeo

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

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

Propriedades CSS da faixa

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

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriedades CSS do botão

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propriedades CSS da bolha de tempo de reprodução

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 e com cores de rastreamento personalizadas com dez pixels de altura. Posicione-o a dez 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 o marcador de capítulo de 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:

.s7interactivevideoviewer .s7videoscrubber .s7navigation

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

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.

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

.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 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 cinza escuro, Verdana de 11 pixels, com um fundo cinza claro. Uma altura de linha de cinco pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de nove 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 CSS do conector de cunha

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