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 por CSS.
A aparência geral do depurador de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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 e com cores de rastreamento personalizadas com dez pixels de altura. Posicione-o a dez pixels e 35 pixels das bordas superior e esquerda da barra de controle.
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
Quando o marcador de capítulo de vídeo é ativado com o parâmetro navigation
, os locais do capítulo são exibidos 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:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Propriedades CSS do marcador de capítulo do vídeo
largura |
Largura do marcador do capítulo de vídeo. |
altura |
Altura do marcador do capítulo de vídeo. |
imagem de fundo |
Arte do marcador de capítulo de vídeo. |
posição de fundo |
Posição dentro da estrutura de arte, se os sprites CSS forem usados. Consulte Sprites CSS . |
Esse botão suporta o seletor de atributos state
, que pode ser usado para aplicar capas diferentes a estados de botão diferentes. Especificamente, selected='default'
corresponde ao estado padrão do marcador do capítulo de vídeo e selected='over'
é usado quando o marcador do capítulo de vídeo é ativado por um gesto de mouse sobre ou toque.
Exemplo - Para configurar um marcador de capítulo de vídeo com 5 x 8 pixels e que use arte diferente para os estados "padrão" e "sobre".
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
A bolha de capítulo do vídeo é posicionada sobre o marcador de capítulo do 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 à faixa do depurador de vídeo. O restante é calculado automaticamente pelo componente.
A bolha do capítulo do vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propriedades CSS da bolha de capítulo do vídeo
largura máxima |
Largura máxima da bolha de capítulo do vídeo. |
bottom |
Deslocamento vertical do rastreamento do depurador de vídeo. |
Exemplo - Para configurar uma bolha de capítulo do vídeo com 235 pixels de largura e oito pixels de altura na parte inferior da faixa do depurador de vídeo.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
A bolha do capítulo do vídeo consiste em um cabeçalho e conteúdo opcionais. O cabeçalho tem a hora de início do capítulo e o título do capítulo opcionais.
O cabeçalho é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Propriedades CSS do cabeçalho da bolha de capítulo do vídeo
altura |
Altura do cabeçalho da bolha de capítulo do vídeo. |
preenchimento |
Preenchimento interno para o texto do cabeçalho da bolha de capítulo do vídeo. |
cor do fundo |
Cor do fundo do cabeçalho da bolha do capítulo de vídeo. |
altura da linha |
Altura da linha de texto do cabeçalho da bolha do capítulo de vídeo. |
Exemplo - Para configurar um cabeçalho de bolha de capítulo do 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.
.s7interactivevideoviewer .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 do vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propriedades CSS da hora de início do capítulo do vídeo
color |
Cor do texto. |
font-weight |
Espessura da fonte. |
tamanho da fonte |
Tamanho da fonte. |
família de fontes |
Família de fontes. |
preenchimento à direita |
Preenchimento entre a hora de início e o título do capítulo. |
Exemplo - Para configurar o tempo de início do capítulo usando a fonte cinza de dez pixels Verdana e com dez pixels no preenchimento à direita.
.s7interactivevideoviewer .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 do vídeo é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
Propriedades CSS do título do capítulo do vídeo
color |
Cor do texto do título do capítulo do vídeo. |
font-weight |
Peso da fonte do título do capítulo do vídeo. |
tamanho da fonte |
Tamanho da fonte do título do capítulo do vídeo. |
família de fontes |
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, em negrito e de dez pixels.
.s7interactivevideoviewer .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 do vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Propriedades CSS da descrição do capítulo do vídeo
color |
Cor do texto da descrição do capítulo do vídeo. |
cor do fundo |
Cor de fundo da descrição do capítulo do vídeo. |
font-weight |
Peso da fonte da descrição do capítulo do vídeo. |
tamanho da fonte |
Tamanho da fonte da descrição do capítulo do vídeo. |
família de fontes |
Família de fontes da descrição do capítulo do vídeo. |
altura da linha |
Altura da linha de descrição do capítulo do vídeo. |
preenchimento |
Preenchimento interno da descrição do capítulo do vídeo. |
Exemplo - Para configurar a descrição do capítulo do vídeo usando uma fonte cinza escuro, Verdana de 11 pixels, com um fundo cinza claro. Uma altura de linha de cinco pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de nove pixels.
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
Propriedades CSS do conector de cunha
cor da borda |
Cor do conector da borda. Definido como <color> transparente para que somente a cor da borda superior seja definida e as bordas restantes sejam deixadas transparentes. |
largura da borda |
Largura do conector da borda. Definido como <width> <width> 0 de forma que a mesma largura seja definida somente para as bordas superior e horizontal e a largura da borda inferior seja 0 . |
margem |
Define somente uma margem inferior negativa. Ele deve ter o mesmo valor que border-width . |
Exemplo - Para configurar um conector de cunha cinza e de seis pixels:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}