Depurador de vídeo

Última atualização em 2023-05-20
  • Criado para:
  • Developer
    User

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:

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

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

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

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

Configure um visualizador de mídia mista com um depurador de vídeo com cores de faixa personalizadas de 10 pixels de altura e posicionado a 10 pixels e 35 pixels das bordas superior e esquerda da barra de controle.

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

Nesta página