Depurador de vídeo video-scrubber

O depurador de vídeo é o controle deslizante horizontal que permite ao usuário buscar dinamicamente qualquer posição no vídeo em reprodução.

O "botão" do depurador também se move conforme o vídeo é reproduzido, para indicar a posição atual do vídeo durante a reprodução. O depurador de vídeo sempre ocupa toda a largura da barra de controle. É possível retirar a capa do depurador de vídeo e alterar sua altura e posição vertical usando CSS.

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

.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .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.
background-color
A cor do depurador de vídeo.

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

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

Propriedades CSS da faixa

altura
Altura da faixa correspondente.
background-color
A cor da faixa correspondente.

O seletor de classe CSS a seguir controla o botão:

.s7interactivevideoviewer .s7videoscrubber .s7knob

Propriedades CSS do botão

top
Deslocamento vertical do botão.
largura
Largura do botão.
altura
Altura do botão.
background-image
Obstrução de arte.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

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

.s7interactivevideoviewer .s7videoscrubber .s7videotime

Propriedades CSS da bolha de tempo reproduzida

font-family
A família da fonte a ser usada para o texto de exibição de hora.
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 da hora.
largura
Largura da área de bolhas.
altura
Altura da área de bolhas.
preenchimento
Preenchimento da área de bolhas.
background-image
Trabalho artístico em bolha.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

text-align
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 e cores de faixa 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 a variável navigation , as localizações dos capítulos são exibidas 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 de vídeo

largura
Largura do marcador de capítulo de vídeo.
altura
Altura do marcador de capítulo de vídeo.
background-image
Arte do marcador de capítulo de vídeo.
background-position

Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas.

Consulte Sprites CSS.

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

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

.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 de vídeo é posicionada sobre o marcador de capítulo de 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 à trilha do depurador de vídeo. O restante é calculado automaticamente pelo componente.

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter

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

max-width
Largura máxima da bolha de capítulo de vídeo.
bottom
Deslocamento vertical da trilha 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 da parte inferior da faixa do depurador de vídeo.

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

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

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

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header

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

altura
Altura do cabeçalho de bolha do capítulo de vídeo.
preenchimento
Preenchimento interno para o texto do cabeçalho de bolha do capítulo de vídeo.
background-color
Cor de fundo do cabeçalho de bolha do capítulo de vídeo.
altura da linha
Altura da linha de texto do cabeçalho de bolha do capítulo de 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 início do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

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

cor
Cor do texto.
font-weight
Peso da fonte.
font-size
Tamanho da fonte.
font-family
Família da fonte.
preenchimento à direita
Preenchimento entre a hora de início e o título do capítulo.

Exemplo - Para configurar a hora de início do capítulo usando fonte Verdana cinza de dez pixels e tem preenchimento de dez pixels à 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 de 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

cor
Cor do texto do título do capítulo do vídeo.
font-weight
Espessura da fonte do título do capítulo do vídeo.
font-size
Tamanho da fonte do título do capítulo do vídeo.
font-family
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, 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 de vídeo é controlada pelo seguinte seletor de classe CSS:

.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description

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

cor
Cor do texto da descrição do capítulo de vídeo.
background-color
Cor de fundo da descrição do capítulo de vídeo.
font-weight
Descrição de capítulo de vídeo espessura da fonte.
font-size
Tamanho da fonte da descrição do capítulo de vídeo.
font-family
Descrição de capítulo de vídeo família de fontes.
altura da linha
Altura da linha de descrição do capítulo de vídeo.
preenchimento
Descrição do capítulo de vídeo preenchimento interno.

Exemplo - Para configurar a descrição do capítulo de vídeo usando uma fonte Verdana de 11 pixels cinza escuro, com um plano de 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

border-color

Cor do conector da cunha.

Definido como <color> transparente para que somente a cor da borda superior seja definida e as bordas restantes fiquem transparentes.

border-width

Largura do conector da cunha.

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. Ele 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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8