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 e alterar sua altura e posição vertical usando o CSS.
A aparência geral do depurador de vídeo é controlada pelo 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. |
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:
.s7mixedmediaviewer .s7videoscrubber .s7track
.s7mixedmediaviewer .s7videoscrubber .s7trackloaded
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .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:
.s7mixedmediaviewer .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.
Configure um visualizador de mídia mista com um depurador de vídeo com cores de rastreamento personalizadas de 10 pixels de altura e posicionado 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;
}