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.
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;
}