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 atual do vídeo durante a reprodução. O depurador de vídeo sempre utiliza toda a largura da barra de controle. É possível esfolar o depurador de vídeo. altere 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 de CSS do depurador de vídeo
top |
Posição a partir da borda superior, incluindo preenchimento. |
bottom |
Posição a partir da borda inferior, incluindo preenchimento. |
altura |
Altura do depurador de vídeo. |
cor de fundo |
A cor do depurador de vídeo. |
Os seguintes seletores de classe CSS rastreiam os indicadores de plano de fundo, reprodução e carga:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
Propriedades de CSS da faixa
altura |
Altura da faixa correspondente. |
cor de fundo |
A cor da faixa correspondente. |
O seguinte seletor de classe CSS controla o botão:
.s7interactivevideoviewer .s7videoscrubber .s7knob
Propriedades de CSS do botão
top |
Deslocamento do botão vertical. |
width |
Largura do botão. |
altura |
Altura do botão. |
background-image |
Nódulo de arte. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
O seletor de classe CSS a seguir controla a bolha de tempo reproduzido:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
Propriedades de CSS da bolha de tempo reproduzida
família de fontes |
A família de fontes a ser usada para o texto de exibição de tempo. |
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 de tempo. |
largura |
Largura da área de bolha. |
altura |
Altura da área de bolha. |
revestimento |
Preenchimento da área de bolha. |
background-image |
Arte de bolha. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
alinhamento de texto |
Alinhamento do texto com a área de bolha. |
A dica de ferramenta do depurador de vídeo pode ser localizada. Consulte Localização de 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 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.
.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 a captação de vídeo é ativada 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 do capítulo de vídeo é controlado pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
Propriedades de CSS do marcador de capítulo de vídeo
largura |
Largura do marcador do capítulo de vídeo. |
altura |
Altura do marcador do capítulo de vídeo. |
background-image |
Arte-final do marcador do capítulo de vídeo. |
posição de fundo |
Posição dentro da sprite de arte, se os sprites CSS forem usados. Consulte CSS Sprites . |
Este botão suporta o seletor de atributos state
, que você pode usar para aplicar diferentes capas a diferentes estados de botão. 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 toque ou sobre o mouse.
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 do start 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 de capítulo do vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
Propriedades de 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 da faixa 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 na parte inferior da faixa do depurador de vídeo.
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
A bolha de capítulo do vídeo consiste em um cabeçalho e conteúdo opcionais. O cabeçalho tem o tempo de start 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 de CSS do cabeçalho da bolha do capítulo do vídeo
altura |
Altura do cabeçalho da bolha do capítulo do vídeo. |
revestimento |
Preenchimento interno para o texto do cabeçalho da bolha do capítulo do vídeo. |
cor de fundo |
Cor de fundo do cabeçalho da bolha do capítulo do vídeo. |
altura da linha |
Altura da linha de texto do cabeçalho da bolha do capítulo do 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 start do capítulo de vídeo é controlada pelo seguinte seletor de classe CSS:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
Propriedades de CSS da hora do start do capítulo do vídeo
cor |
Cor do texto. |
font-peso |
Peso de fonte. |
font-size |
Tamanho da fonte. |
família de fontes |
Família de fontes. |
preenchimento à direita |
Preenchimento entre a hora do start e o título do capítulo. |
Exemplo - Para configurar o tempo de start do capítulo usando a fonte Verdana cinza de dez pixels e tem 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 de CSS do título do capítulo do vídeo
cor |
Cor do texto do título do capítulo do vídeo. |
font-peso |
Peso de fonte do título do capítulo de vídeo. |
font-size |
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 de vídeo. |
Exemplo - Para configurar um título de capítulo de vídeo que usa uma fonte Verdana branca, em negrito e 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 de CSS da descrição do capítulo do vídeo
cor |
Cor do texto da descrição do capítulo do vídeo. |
cor de fundo |
Cor de fundo da descrição do capítulo do vídeo. |
font-peso |
Peso de fonte de descrição do capítulo do vídeo. |
font-size |
Tamanho da fonte da descrição do capítulo do vídeo. |
família de fontes |
Família de fontes de descrição do capítulo do vídeo. |
altura da linha |
Altura da linha de descrição do capítulo do vídeo. |
revestimento |
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 Verdana cinza escuro, de 11 pixels, com um fundo cinza claro; Altura de linha de 5 pixels, preenchimento horizontal de 12 pixels, preenchimento superior de 12 pixels e preenchimento inferior de 9 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 de CSS do conector de tecelagem
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 fiquem transparentes. |
largura da borda |
Largura do conector da borda. 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. 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;
}