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:

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

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .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:

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

.s7videoviewer .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 com cores de rastreamento personalizadas. O depurador deve ter dez pixels de altura e estar posicionado a dez 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 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:

 .s7videoviewer .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 suporta as opções 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".

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

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

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

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

.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 de vídeo é controlada pelo seguinte seletor de classe CSS:

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

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

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.

.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 de vídeo é controlada pelo seguinte seletor de classe CSS:

 .s7videoviewer .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. E, finalmente, usa a altura da linha de cinco pixels, o preenchimento horizontal de 12 pixels, o preenchimento superior de 12 pixels e o preenchimento inferior de nove 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

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:

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