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:
.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. |
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:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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:
.s7interactivevideoviewer .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 - Para configurar um visualizador de vídeo com um depurador de vídeo e cores de faixa 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 a variável navigation
, as localizações dos capítulos são exibidas 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 de vídeo
largura |
Largura do marcador de capítulo de vídeo. |
altura |
Altura do marcador de capítulo de vídeo. |
background-image |
Arte do marcador de capítulo de vídeo. |
background-position |
Posicionar dentro da imagem de arte-final, se as imagens CSS forem usadas. Consulte Sprites CSS . |
Esse botão oferece suporte ao state
seletor de atributos, que você pode usar para aplicar capas diferentes a estados de botão diferentes. Em especial, selected='default'
corresponde ao estado padrão do marcador de capítulo de vídeo e selected='over'
é usado quando o marcador de capítulo de vídeo é ativado por um gesto de toque ou mouse sobre.
Exemplo - Para configurar um marcador de capítulo de vídeo com 5 x 8 pixels e usar uma arte diferente para os estados "padrão" e "acima".
.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 de vídeo é posicionada sobre o marcador de capítulo de 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 à trilha do depurador de vídeo. O restante é calculado automaticamente pelo componente.
A bolha do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propriedades CSS da bolha de capítulo de vídeo
max-width |
Largura máxima da bolha de capítulo de vídeo. |
bottom |
Deslocamento vertical da trilha do depurador de vídeo. |
Exemplo - Para configurar uma bolha de capítulo de vídeo com 235 pixels de largura e oito pixels acima da parte inferior da faixa do depurador de vídeo.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
A bolha do capítulo de vídeo consiste em um cabeçalho e conteúdo opcionais. O cabeçalho tem a hora de início e o título opcionais do capítulo.
O cabeçalho é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
Propriedades CSS do cabeçalho de bolha do capítulo de vídeo
altura |
Altura do cabeçalho de bolha do capítulo de vídeo. |
preenchimento |
Preenchimento interno para o texto do cabeçalho de bolha do capítulo de vídeo. |
background-color |
Cor de fundo do cabeçalho de bolha do capítulo de vídeo. |
altura da linha |
Altura da linha de texto do cabeçalho de bolha do capítulo de vídeo. |
Exemplo - Para configurar um cabeçalho de bolha de capítulo de 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 de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propriedades CSS da hora de início do capítulo de vídeo
cor |
Cor do texto. |
font-weight |
Peso da fonte. |
font-size |
Tamanho da fonte. |
font-family |
Família da fonte. |
preenchimento à direita |
Preenchimento entre a hora de início e o título do capítulo. |
Exemplo - Para configurar a hora de início do capítulo usando fonte Verdana cinza de dez pixels e tem preenchimento de dez pixels à 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 de 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
cor |
Cor do texto do título do capítulo do vídeo. |
font-weight |
Espessura da fonte do título do capítulo do vídeo. |
font-size |
Tamanho da fonte do título do capítulo do vídeo. |
font-family |
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, 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 de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
Propriedades CSS da descrição do capítulo de vídeo
cor |
Cor do texto da descrição do capítulo de vídeo. |
background-color |
Cor de fundo da descrição do capítulo de vídeo. |
font-weight |
Descrição de capítulo de vídeo espessura da fonte. |
font-size |
Tamanho da fonte da descrição do capítulo de vídeo. |
font-family |
Descrição de capítulo de vídeo família de fontes. |
altura da linha |
Altura da linha de descrição do capítulo de vídeo. |
preenchimento |
Descrição do capítulo de vídeo preenchimento interno. |
Exemplo - Para configurar a descrição do capítulo de vídeo usando uma fonte Verdana de 11 pixels cinza escuro, com um plano de 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
border-color |
Cor do conector da cunha. Definido como <color> transparente para que somente a cor da borda superior seja definida e as bordas restantes fiquem transparentes. |
border-width |
Largura do conector da cunha. Definido como <width> <width> 0 para que a mesma largura seja definida somente para as bordas superior e horizontal e a largura da borda inferior seja 0 . |
margem |
Define apenas uma margem inferior negativa. Ele deve ter o mesmo valor que border-width . |
Exemplo - Para configurar um conector de cunha cinza 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;
}