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, alterar sua altura e a posição vertical por CSS.

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

.s7smartcropvideoviewer .s7videoscrubber
.s7smartcropvideoviewer .s7videoscrubber .s7videotime
.s7smartcropvideoviewer .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:

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

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

.s7smartcropvideoviewer .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 dez pixels de altura. E finalmente, posicioná-lo a 10 pixels e 35 pixels das bordas superior e esquerda da barra de controle.

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

Nesta página